import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Term } from '../../types/term';
import { WordCard } from './WordCard';
import { Button } from '../ui/button';

interface WordGridProps {
  terms: Term[];
  loading?: boolean;
  onInfo: (term: Term) => void;
  onAddToSentence?: (term: Term) => void;
  pagination?: {
    page: number;
    limit: number;
    total: number;
    totalPages: number;
  };
  onPageChange?: (page: number) => void;
}

export function WordGrid({ 
  terms, 
  loading, 
  onInfo, 
  onAddToSentence,
  pagination,
  onPageChange,
}: WordGridProps) {
  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Učitavanje...</p>
        </div>
      </div>
    );
  }

  if (terms.length === 0) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="text-center">
          <p className="text-gray-600 text-lg mb-2">Nema pronađenih riječi</p>
          <p className="text-gray-500 text-sm">Pokušajte promijeniti filtere ili pretragu</p>
        </div>
      </div>
    );
  }

  return (
    <div>
      {/* Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-6">
        {terms.map((term) => (
          <WordCard
            key={term.id}
            term={term}
            onInfo={onInfo}
            onAddToSentence={onAddToSentence}
          />
        ))}
      </div>

      {/* Pagination */}
      {pagination && pagination.totalPages > 1 && (
        <div className="flex items-center justify-between bg-white p-4 rounded-lg shadow">
          <div className="text-sm text-gray-600">
            Stranica {pagination.page} od {pagination.totalPages} 
            <span className="ml-2">
              (Ukupno: {pagination.total} {pagination.total === 1 ? 'riječ' : 'riječi'})
            </span>
          </div>
          
          <div className="flex gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => onPageChange?.(pagination.page - 1)}
              disabled={pagination.page === 1}
            >
              <ChevronLeft className="h-4 w-4 mr-1" />
              Prethodna
            </Button>
            
            <Button
              variant="outline"
              size="sm"
              onClick={() => onPageChange?.(pagination.page + 1)}
              disabled={pagination.page === pagination.totalPages}
            >
              Sljedeća
              <ChevronRight className="h-4 w-4 ml-1" />
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}

