import React, { useState } from "react";
import { Plus, X } from "lucide-react";
import { Input } from "../ui/input";
import { Button } from "../ui/button";

const EnumsEditor = ({ enums, onChange }) => {
    const [_enums, setEnums] = useState(enums || []);

    return (
        <div className="space-y-3 rounded-md border border-border bg-background/40 p-4">
            <ul className="space-y-2">
                {_enums.map((item, index) => (
                    <li key={index} className="flex items-center gap-2">
                        <Input
                            className="h-8 text-xs"
                            type="text"
                            value={item}
                            onChange={(e) => {
                                const updated = [..._enums];
                                updated[index] = e.target.value;
                                setEnums(updated);
                                onChange(updated);
                            }}
                        />
                        <Button
                            type="button"
                            variant="destructive"
                            size="icon-sm"
                            onClick={() => {
                                const updated = [..._enums];
                                updated.splice(index, 1);
                                setEnums(updated);
                                onChange(updated);
                            }}
                        >
                            <X className="h-3.5 w-3.5" />
                        </Button>
                    </li>
                ))}
            </ul>
            <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={() => {
                    const updated = [..._enums, ""];
                    setEnums(updated);
                    onChange(updated);
                }}
            >
                <Plus className="h-4 w-4" /> Add Enum
            </Button>
        </div>
    );
};

export default EnumsEditor;
