Attachment

import { Image as ImageIcon, Paperclip } from "lucide-react"
import { useEffect, useState } from "react"
import { Attachment, AttachmentList } from "@/components/ui/attachment"
import { Button } from "@/components/ui/button"

type Upload = { id: number; name: string; size: number; state: "done" | "uploading" | "error"; progress: number };

export function AttachmentDemo() {
  const [files, setFiles] = useState<Upload[]>([
    { id: 1, name: "close-checklist-q3.pdf", size: 2_516_582, state: "done", progress: 100 },
    { id: 2, name: "bank-export-october.csv", size: 880_000, state: "uploading", progress: 20 },
    { id: 3, name: "ledger-2025.xlsx", size: 14_000_000, state: "error", progress: 0 },
  ]);
  // The upload bar moves on a timer here; in your app it follows the request's real progress.
  useEffect(() => {
    const id = setInterval(() => {
      setFiles((all) => all.map((file) => (file.state === "uploading" ? (file.progress >= 100 ? { ...file, state: "done" } : { ...file, progress: Math.min(100, file.progress + 8) }) : file)));
    }, 700);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="grid gap-4">
      <AttachmentList aria-label="Attachments">
        {files.map((file) => (
          <Attachment
            key={file.id}
            name={file.name}
            size={file.size}
            state={file.state}
            progress={file.progress}
            error="Over 10 MB"
            onRemove={() => setFiles((all) => all.filter((item) => item.id !== file.id))}
            onRetry={() => setFiles((all) => all.map((item) => (item.id === file.id ? { ...item, state: "uploading", progress: 10 } : item)))}
          />
        ))}
      </AttachmentList>
      <AttachmentList aria-label="Image">
        <Attachment variant="card" name="dashboard-mock.png" size={1_153_434} preview={<ImageIcon aria-hidden="true" className="size-6" />} onRemove={() => undefined} />
      </AttachmentList>
      <Button size="sm" variant="secondary" className="justify-self-start" onClick={() => setFiles((all) => [...all, { id: Date.now(), name: "receipts-oct.zip", size: 3_400_000, state: "uploading", progress: 0 }])}>
        <Paperclip aria-hidden="true" />Add a file
      </Button>
    </div>
  );
}