import { HardDriveDownloadIcon } from 'lucide-react';
import { buttonVariants } from '#/components/atoms/button.jsx';
import { Heading } from '#/components/atoms/heading.jsx';
import { Panel } from '#/components/atoms/panel.jsx';
import { cn } from '#/lib/utils.js';

/**
 * The manual escape hatch: a full signed CAR of the repository, straight from
 * the sync endpoint. Works whether or not the server has a backup target.
 * @param {{did: string, handle: string|null|undefined}} props
 */
export function RepoDownloadCard({ did, handle }) {
  return (
    <Panel>
      <Heading>Download a copy</Heading>
      <p className="mt-2 text-[13px] text-muted-foreground leading-relaxed">
        Your whole repository as one signed .car file — every record, readable
        by any atproto tool. Files you've uploaded, like images, aren't in it;
        snapshots carry those.
      </p>
      <a
        href={`/xrpc/com.atproto.sync.getRepo?did=${encodeURIComponent(did)}`}
        download={`${handle || 'repo'}.car`}
        className={cn(
          buttonVariants({ variant: 'outline', size: 'block' }),
          'mt-4',
        )}
      >
        <HardDriveDownloadIcon />
        Download repository
      </a>
    </Panel>
  );
}