import { Button, Input } from "@fluentui/react-components";
import { Add24Regular, Delete24Regular } from "@fluentui/react-icons";

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

export function StringListEditor({
  items,
  onChange,
  placeholder,
  addLabel = "Add entry",
}: StringListEditorProps): React.JSX.Element {
  const handleChange = (index: number, value: string): void => {
    const next = [...items];
    next[index] = value;
    onChange(next);
  };

  const handleDelete = (index: number): void => {
    onChange(items.filter((_, i) => i !== index));
  };

  const handleAdd = (): void => {
    onChange([...items, ""]);
  };

  return (
    <div>
      {items.map((item, index) => (
        <div key={index} style={{ display: "flex", gap: 4, marginBottom: 4, alignItems: "center" }}>
          <Input
            value={item}
            size="small"
            style={{ flex: 1, fontFamily: "monospace" }}
            placeholder={placeholder}
            aria-label={`Entry ${String(index + 1)}${item ? `: ${item}` : ""}`}
            onChange={(_e, d) => { handleChange(index, d.value); }}
          />
          <Button
            icon={<Delete24Regular />}
            size="small"
            appearance="subtle"
            onClick={() => { handleDelete(index); }}
            aria-label="Remove entry"
          />
        </div>
      ))}
      <Button
        icon={<Add24Regular />}
        size="small"
        appearance="outline"
        onClick={handleAdd}
        style={{ marginTop: 4 }}
      >
        {addLabel}
      </Button>
    </div>
  );
}
