// frontend/components/tasks/TreeAdd.tsx — 인라인 새 프로젝트 생성
"use client";
import { useState } from "react";
import { Icon } from "@/components/Icon";

export function TreeAdd({
  depth,
  placeholder,
  onAdd,
}: {
  depth: number;
  placeholder: string;
  onAdd: (name: string) => void;
}) {
  const [editing, setEditing] = useState(false);
  const [val, setVal] = useState("");
  const commit = () => {
    const v = val.trim();
    if (v) onAdd(v);
    setVal("");
    setEditing(false);
  };
  if (!editing) {
    return (
      <button
        className="tree-add"
        style={{ paddingLeft: 8 + depth * 15 }}
        onClick={() => setEditing(true)}
      >
        <Icon name="plus" /> {placeholder}
      </button>
    );
  }
  return (
    <div className="tree-addrow" style={{ paddingLeft: 8 + depth * 15 }}>
      <input
        autoFocus
        value={val}
        placeholder={placeholder}
        onChange={(e) => setVal(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter") commit();
          if (e.key === "Escape") {
            setVal("");
            setEditing(false);
          }
        }}
        onBlur={commit}
      />
    </div>
  );
}