File upload

"use client";

import { useState } from "react";
import { Button } from "@/registry/ds/button";
import { FileUpload } from "@/registry/ds/file-upload";

/** Un solo archivo, controlado: el padre guarda el File, lo muestra y permite quitarlo; el error viene de tu validación */
export default function FileUploadSingle() {
  const [files, setFiles] = useState<File[]>([]);
  const [error, setError] = useState<string | undefined>();
  const foto = files[0];

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <FileUpload
        size="sm"
        label="Foto para el carnet"
        accept="image/jpeg,image/png"
        maxSize={2 * 1024 * 1024}
        value={files}
        onChange={(next) => {
          setFiles(next.slice(0, 1));
          setError(next.length > 1 ? "Solo una foto. Nos quedamos con la primera." : undefined);
        }}
        error={error}
        hint="JPG o PNG, hasta 2 MB. De frente y sin anteojos oscuros."
      >
        o arrastrala acá
      </FileUpload>
      {foto && (
        <div className="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-elevated px-3 py-2 text-sm">
          <span className="truncate text-fg">
            {foto.name} <span className="text-fg-muted">· {(foto.size / 1024).toFixed(0)} KB</span>
          </span>
          <Button size="sm" variant="text" onClick={() => setFiles([])}>
            Quitar
          </Button>
        </div>
      )}
    </div>
  );
}