File Upload

"use client";
import { useEffect, useState } from "react";
import { Upload, File, CheckCircle2 } from "lucide-react";
import { cn } from "@/lib/utils";

type State = "idle" | "dragover" | "uploading" | "done";

export function FileUpload({ state = "idle" }: { state?: State }) {
const [progress, setProgress] = useState(state === "uploading" ? 45 : state === "done" ? 100 : 0);
useEffect(() => {
  setProgress(state === "uploading" ? 45 : state === "done" ? 100 : 0);
}, [state]);

const showFile = state === "uploading" || state === "done";

return (
  <div className="w-full max-w-md">
    <label
      className={cn(
        "grid h-40 cursor-pointer place-items-center rounded-lg border-2 border-dashed bg-background/30 transition-colors",
        state === "dragover" ? "border-lab-accent bg-lab-accent/5" : "border-border",
      )}
    >
      <input type="file" className="hidden" />
      <div className="text-center">
        <Upload
          className={cn(
            "mx-auto mb-2 h-6 w-6",
            state === "dragover" ? "text-lab-accent" : "text-muted-foreground",
          )}
        />
        <p className="text-xs text-foreground">
          {state === "dragover" ? "放開以上傳" : "點擊或拖放檔案"}
        </p>
        <p className="mt-1 font-mono text-[10px] text-muted-foreground">PNG / JPG / PDF · ≤ 10MB</p>
      </div>
    </label>
    {showFile && (
      <div className="mt-3 rounded-md border border-border bg-background/50 p-3">
        <div className="mb-2 flex items-center gap-2 text-xs">
          <File className="h-3.5 w-3.5 text-muted-foreground" />
          <span className="flex-1 truncate text-foreground">design-v2.png</span>
          {state === "done" ? (
            <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />
          ) : (
            <span className="font-mono text-[10px] text-muted-foreground">{progress}%</span>
          )}
        </div>
        <div className="h-1 overflow-hidden rounded-full bg-muted">
          <div
            className="h-full bg-lab-accent transition-all duration-300"
            style={{ width: `${progress}%` }}
          />
        </div>
      </div>
    )}
  </div>
);
}