import { SentenceToken } from '../../stores/sentenceStore';
import { FileText } from 'lucide-react';

interface SentencePanelProps {
  tokens: SentenceToken[];
  currentTokenIndex: number;
  onTokenClick: (index: number) => void;
}

export function SentencePanel({
  tokens,
  currentTokenIndex,
  onTokenClick,
}: SentencePanelProps) {
  // Empty state
  if (tokens.length === 0) {
    return (
      <div className="bg-white rounded-lg shadow-md p-8">
        <div className="text-center space-y-4">
          <FileText className="h-16 w-16 text-gray-300 mx-auto" />
          <h3 className="text-xl font-semibold text-gray-900">Nema učitane rečenice</h3>
          <div className="text-sm text-gray-600 space-y-2">
            <p className="font-medium">Kako započeti:</p>
            <ol className="text-left space-y-1 max-w-xs mx-auto">
              <li>1. Dodajte riječi u Rječniku</li>
              <li>2. Uredite rečenicu u Znakopisu</li>
              <li>3. Vratite se ovdje za reprodukciju</li>
            </ol>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-lg shadow-md p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Rečenica</h3>
      
      {/* Token list */}
      <div className="flex flex-wrap gap-2">
        {tokens.map((token, index) => {
          const isActive = index === currentTokenIndex;
          
          return (
            <button
              key={token.id}
              onClick={() => onTokenClick(index)}
              className={`
                px-4 py-2 rounded-lg font-medium transition-all duration-200
                ${isActive
                  ? 'bg-orange-400 text-white font-semibold transform scale-105 shadow-lg shadow-orange-400/30'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200 hover:transform hover:-translate-y-0.5'
                }
              `}
            >
              {token.displayText}
            </button>
          );
        })}
      </div>

      {/* Info */}
      <div className="mt-6 pt-4 border-t border-gray-200">
        <div className="flex items-center justify-between text-sm text-gray-600">
          <span>Ukupno riječi: {tokens.length}</span>
          <span>Trenutna pozicija: {currentTokenIndex + 1} / {tokens.length}</span>
        </div>
      </div>
    </div>
  );
}

