1"use client";
2
3import { Card, Dropzone, Tabs } from "@versable-git/ui";
4import { useState } from "react";
5
6// Both apps converge on the same ruling: when the dropzone is compact, the
7// surface around it goes borderless and the dashed edge IS the card. The
8// Tabs knob switches one dropzone through its three real states: nothing
9// picked yet, a file queued, and a rejected file.
10type View = "empty" | "queued" | "error";
11
12const queuedFiles = [{ name: "fitment-update.csv", size: "88 KB" }];
13
14const CARD_SUBTITLE: Record<View, string> = {
15  empty: "0 selected",
16  queued: "1 selected",
17  error: "Upload failed",
18};
19
20export function CompactDropzone() {
21  const [view, setView] = useState<View>("empty");
22  const files = view === "queued" ? queuedFiles : [];
23  const compact = files.length > 0;
24
25  return (
26    <div className="flex flex-col gap-3">
27      <Tabs
28        size="sm"
29        value={view}
30        onChange={(v) => setView(v as View)}
31        items={[
32          { value: "empty", label: "Empty" },
33          { value: "queued", label: "One file queued" },
34          { value: "error", label: "Error" },
35        ]}
36      />
37      <Card title="Files" subtitle={CARD_SUBTITLE[view]} noBorder noAnimate bodyClassName="px-0">
38        <Dropzone
39          multiple
40          compact={compact}
41          accept=".csv,.tsv,.xlsx,.xls,.xml"
42          Icon="CloudUpload"
43          error={view === "error" ? "brake-pads-q3.xlsx exceeds the 25 MB upload limit." : undefined}
44          headline={
45            <span className="flex min-w-[200px] flex-1 flex-col text-left">
46              <span className="text-[15px] font-bold">Drag files here, or click to browse</span>
47              <span className="text-base-content/65 mt-0.5 text-[13px] font-normal">
48                New uploads land in Files too, so other jobs can reuse them.
49              </span>
50            </span>
51          }
52          hint={null}
53          browseLabel="Add files"
54          onFiles={() => {}}
55          className="bg-base-100 hover:border-primary rounded-box border-secondary/25 flex-row flex-wrap items-center gap-3.5 border border-dashed p-5 text-left"
56        />
57        {files.length > 0 && (
58          <ul className="mt-3 flex flex-col gap-1">
59            {files.map((f) => (
60              <li key={f.name} className="text-base-content/70 flex justify-between text-sm">
61                <span>{f.name}</span>
62                <span className="text-base-content/45">{f.size}</span>
63              </li>
64            ))}
65          </ul>
66        )}
67      </Card>
68    </div>
69  );
70}
71