// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)
/**
 * PhraseRow — single editable row in a PhraseListEditor (text input + delete).
 *
 * @layer Presentation
 */

import { X } from 'lucide-react';

interface PhraseRowProps {
  phrase: string;
  maxChars: number;
  onEdit: (value: string) => void;
  onRemove: () => void;
  removeLabel: string;
}

export function PhraseRow({
  phrase,
  maxChars,
  onEdit,
  onRemove,
  removeLabel,
}: PhraseRowProps) {
  const overLimit = phrase.length > maxChars;
  return (
    <li className="flex items-center gap-2">
      <input
        type="text"
        value={phrase}
        onChange={(e) => onEdit(e.target.value)}
        maxLength={maxChars + 10}
        className={`flex-1 px-3 py-2 text-sm border rounded-lg focus:ring-2 focus:ring-cyan-500 focus:outline-none ${
          overLimit ? 'border-red-400 bg-red-50' : 'border-gray-300 bg-white'
        }`}
      />
      <button
        type="button"
        onClick={onRemove}
        className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
        aria-label={removeLabel}
        title={removeLabel}
      >
        <X size={16} />
      </button>
    </li>
  );
}