'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const button = require('../../../button.cjs');
const LucideIcons = require('lucide-react');
const input = require('../../../input.cjs');

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

exports.NameEdit = NameEdit;
