import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { fetchBackups } from "@/lib/actions";
import Link from "next/link";

export default async function Backups() {
  const backups = await fetchBackups();

  return (
    <Card>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Type</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {backups.map((backup) => (
            <TableRow key={backup.name}>
              <TableCell>{backup.name}</TableCell>
              <TableCell>{backup.type}</TableCell>
              <TableCell>
                <Link target="_blank" href={`/api/download/backup/${encodeURIComponent(backup.name)}`}>
                  <Button>
                    Download
                  </Button>
                </Link>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Card>
  );
}
