import type { ComponentProps } from "react";
import { Button, Input } from "@common/components";

type EditableNodeProps = {
  depth?: number;
  onSave: () => void;
  onCancel: () => void;
} & ComponentProps<typeof Input>;

function EditableNode({
  depth,
  onSave,
  onCancel,
  ...props
}: EditableNodeProps) {
  return (
    <div
      className="flex items-center gap-2 rounded-sm bg-accent p-2"
      style={{ marginInlineStart: !depth ? 0 : depth * 5 + 5 }}
    >
      <Input {...props} className="h-[2.5rem] !text-[1.3rem] text-foreground" />
      <div className="flex items-center gap-1">
        <Button
          variant="ghost"
          size="icon"
          className="size-8 !bg-transparent"
          onClick={onSave}
        >
          <i className="diveicon di-check text-2xl" />
        </Button>
        <Button
          variant="ghost"
          size="icon"
          className="size-8 !bg-transparent"
          onClick={onCancel}
        >
          <i className="diveicon di-x" />
        </Button>
      </div>
    </div>
  );
}

export { EditableNode };