"use client";
import { useState } from "react";
import { Plus, Upload } from "lucide-react";
import { createActressAction } from "@/app/actions/entities";
import { ActressImportDialog } from "./ActressImportDialog";

export function ActressCreateBar() {
  const [importing, setImporting] = useState(false);
  return (
    <>
      <div className="flex items-center gap-2">
        <form action={createActressAction} className="flex items-center gap-2">
          <input
            name="name"
            placeholder="New Actress"
            required
            maxLength={80}
            className="glass rounded-lg px-3 py-1.5 text-sm outline-none focus:border-[var(--color-cyan)] w-56"
          />
          <button className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg bg-[var(--color-cyan)] text-black font-medium">
            <Plus className="w-4 h-4" /> Create
          </button>
        </form>
        <button
          type="button"
          onClick={() => setImporting(true)}
          className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg glass glass-hover"
          title="Bulk import a list of actresses"
        >
          <Upload className="w-4 h-4" /> Import…
        </button>
      </div>
      {importing && <ActressImportDialog onClose={() => setImporting(false)} />}
    </>
  );
}