import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useCallback, useEffect } from 'react';
import { Button } from '../../../button.mjs';
import { Check, X } from 'lucide-react';
import { Input } from '../../../input.mjs';

const NameEdit = ({ initialName, onSave, onCancel }) => {
  const [newName, setNewName] = useState(initialName);
  const handleSave = useCallback(() => {
    if (newName.trim()) {
      onSave(newName.trim());
    }
  }, [newName, onSave]);
  const handleCancel = useCallback(() => {
    setNewName(initialName);
    onCancel();
  }, [initialName, onCancel]);
  const handleChange = useCallback((e) => {
    setNewName(e.target.value);
  }, []);
  const handleKeyDown = useCallback(
    (e) => {
      if (e.key === "Enter") {
        handleSave();
      } else if (e.key === "Escape") {
        handleCancel();
      }
    },
    [handleSave, handleCancel]
  );
  useEffect(() => {
    setNewName(initialName);
  }, [initialName]);
  return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
    /* @__PURE__ */ jsx(
      Input,
      {
        type: "text",
        value: newName,
        onChange: handleChange,
        onKeyDown: handleKeyDown,
        autoFocus: true
      }
    ),
    /* @__PURE__ */ jsx(
      Button,
      {
        variant: "ghost",
        size: "icon",
        onClick: handleSave,
        className: "ml-1",
        "aria-label": "Save rename",
        children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
      }
    ),
    /* @__PURE__ */ jsx(
      Button,
      {
        variant: "ghost",
        size: "icon",
        onClick: handleCancel,
        className: "ml-1",
        "aria-label": "Cancel rename",
        children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
      }
    )
  ] });
};

export { NameEdit };
