import { MdDelete } from "react-icons/md";

interface Props {
  letter: string;
  word: string;
  isSelected: boolean;
  onClick: () => void;
  onRemove?: () => void;
  onEdit?: (newWord: string) => void;
  isEditMode?: boolean;
}

const FillBlanksWord: React.FC<Props> = ({
    letter,
    word,
    isSelected,
    onClick,
    onRemove,
    onEdit,
    isEditMode
  }) => {
    return (
      <div className="w-full flex items-center gap-2">
        {isEditMode ? (
          <div className="min-w-0 flex-1 flex items-center gap-2 p-2 rounded-md border border-gray-200">
            <span className="font-medium min-w-[24px] text-center shrink-0">{letter}</span>
            <input
              type="text"
              value={word}
              onChange={(e) => onEdit?.(e.target.value)}
              className="w-full min-w-0 focus:outline-none"
            />
          </div>
        ) : (
          <button
            onClick={onClick}
            className={`
              min-w-0 flex-1 flex items-center gap-2 p-2 rounded-md border text-left transition-colors
              ${isSelected ? 'border-blue-500 bg-blue-100' : 'border-gray-200'}
            `}
          >
            <span className="font-medium min-w-[24px] text-center shrink-0">{letter}</span>
            <span className="truncate">{word}</span>
          </button>
        )}
        {isEditMode && onRemove && (
          <button
            onClick={onRemove}
            className="p-1 rounded text-red-500 hover:bg-gray-100 shrink-0"
            aria-label="Remove word"
          >
            <MdDelete className="h-4 w-4" />
          </button>
        )}
      </div>
    );
  };
export default FillBlanksWord;