// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)
/**
 * PhraseAddBox — trailing text input + [Add] button used to append phrases.
 *
 * Stateless on the draft itself — the parent owns the draft string so the
 * outer editor can clear it after a successful add.
 *
 * @layer Presentation
 */

import { Plus } from 'lucide-react';

interface PhraseAddBoxProps {
  draft: string;
  setDraft: (value: string) => void;
  onAdd: () => void;
  atLimit: boolean;
  canAdd: boolean;
  maxChars: number;
  addPlaceholder?: string;
  addLabel: string;
}

export function PhraseAddBox({
  draft,
  setDraft,
  onAdd,
  atLimit,
  canAdd,
  maxChars,
  addPlaceholder,
  addLabel,
}: PhraseAddBoxProps) {
  return (
    <div className="flex items-center gap-2 pt-1">
      <input
        type="text"
        value={draft}
        onChange={(e) => setDraft(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            e.preventDefault();
            onAdd();
          }
        }}
        placeholder={addPlaceholder}
        maxLength={maxChars + 10}
        disabled={atLimit}
        className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-cyan-500 focus:outline-none disabled:bg-gray-100 disabled:cursor-not-allowed"
      />
      <button
        type="button"
        onClick={onAdd}
        disabled={!canAdd}
        className="px-3 py-2 text-sm font-medium text-white bg-cyan-600 hover:bg-cyan-700 rounded-lg transition-colors inline-flex items-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        <Plus size={14} />
        {addLabel}
      </button>
    </div>
  );
}