import { useState } from "react";
import { Upload } from "lucide-react";
import { Button } from "@/components/ui/button";
import ImportSpreadsheetDialog from "@/components/ImportSpreadsheetDialog";

interface RecordImportButtonProps {
  title: string;
  description: string;
  expectedColumns: { key: string; label: string; required?: boolean; aliases?: string[] }[];
  onImport: (rows: Record<string, string>[]) => Promise<void>;
  templateFileName?: string;
  variant?: "default" | "outline" | "ghost";
  label?: string;
}

export default function RecordImportButton({
  title,
  description,
  expectedColumns,
  onImport,
  templateFileName,
  variant = "outline",
  label = "Import",
}: RecordImportButtonProps) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant={variant} className="gap-2" onClick={() => setOpen(true)}>
        <Upload className="h-4 w-4" /> {label}
      </Button>
      <ImportSpreadsheetDialog
        open={open}
        onOpenChange={setOpen}
        title={title}
        description={description}
        expectedColumns={expectedColumns}
        onImport={onImport}
        templateFileName={templateFileName}
      />
    </>
  );
}
