import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Plus, X } from "lucide-react";

interface DynamicListFieldProps {
  label: string;
  items: string[];
  onChange: (items: string[]) => void;
  placeholder?: string;
  addLabel?: string;
}

const DynamicListField = ({ label, items, onChange, placeholder, addLabel }: DynamicListFieldProps) => {
  const addItem = () => onChange([...items, ""]);
  const removeItem = (i: number) => onChange(items.filter((_, idx) => idx !== i));
  const updateItem = (i: number, val: string) => onChange(items.map((v, idx) => (idx === i ? val : v)));

  return (
    <div className="space-y-3">
      <Label className="font-semibold">{label}</Label>
      {items.map((item, i) => (
        <div key={i} className="flex gap-2">
          <Input
            value={item}
            onChange={(e) => updateItem(i, e.target.value)}
            placeholder={placeholder}
            className="flex-1"
          />
          <Button type="button" variant="ghost" size="icon" onClick={() => removeItem(i)} className="text-destructive shrink-0">
            <X className="h-4 w-4" />
          </Button>
        </div>
      ))}
      <Button type="button" variant="outline" size="sm" onClick={addItem}>
        <Plus className="h-3 w-3 mr-1" /> {addLabel || `Add ${label}`}
      </Button>
    </div>
  );
};

export default DynamicListField;