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

interface Props {
  options: string[];
  onChange: (options: string[]) => void;
}

export default function BoardVoteOptionsEditor({ options, onChange }: Props) {
  const updateOption = (index: number, value: string) => {
    const updated = [...options];
    updated[index] = value;
    onChange(updated);
  };

  const addOption = () => onChange([...options, ""]);
  const removeOption = (index: number) => onChange(options.filter((_, i) => i !== index));

  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <Label>Vote Options</Label>
        <Button type="button" variant="ghost" size="sm" onClick={addOption} className="h-6 text-xs">
          <Plus className="w-3 h-3 mr-1" /> Add Option
        </Button>
      </div>
      <div className="space-y-2 max-h-[150px] overflow-y-auto pr-1">
        {options.map((opt, i) => (
          <div key={i} className="flex gap-2">
            <Input
              value={opt}
              onChange={(e) => updateOption(i, e.target.value)}
              placeholder={`Option ${i + 1}`}
            />
            {options.length > 2 && (
              <Button type="button" variant="ghost" size="icon" onClick={() => removeOption(i)}>
                <Trash2 className="w-4 h-4 text-muted-foreground hover:text-destructive" />
              </Button>
            )}
          </div>
        ))}
      </div>
      <p className="text-xs text-muted-foreground">Minimum 2 options required. Board members can select only one.</p>
    </div>
  );
}
