import React from 'react'
import Link from 'next/link'
import { Flashcard } from '@/lib/services/flashcards'
import { FlashcardCard } from './FlashcardCard'

interface SearchResultsProps {
  searchState: any
  activeTab: string
  onEdit: (card: Flashcard) => void
  onDelete: (card: Flashcard) => void
  onToggleFavorite: (card: Flashcard) => void
  getCEFRColor: (level: string) => string
  highlightSearchTerm: (text: string, term: string) => React.ReactNode
  getExampleImage: (card: Flashcard) => string | null
  hasExampleImage: (card: Flashcard) => boolean
  onGenerateExampleImage: (card: Flashcard) => void
  generatingCards: Set<string>
  generationProgress: {[cardId: string]: string}
  router: any
}

export const SearchResults: React.FC<SearchResultsProps> = ({
  searchState,
  activeTab,
  onEdit,
  onDelete,
  onToggleFavorite,
  getCEFRColor,
  highlightSearchTerm,
  getExampleImage,
  hasExampleImage,
  onGenerateExampleImage,
  generatingCards,
  generationProgress,
  router
}) => {
  if (searchState.flashcards.length === 0) {
    return (
      <div className="text-center py-12">
        {activeTab === 'favorites' ? (
          <>
            <div className="text-yellow-500 text-6xl mb-4">⭐</div>
            <p className="text-gray-500 mb-4">還沒有收藏的詞卡</p>
            <p className="text-sm text-gray-400">在詞卡列表中點擊星星按鈕來收藏重要的詞彙</p>
          </>
        ) : (
          <>
            <p className="text-gray-500 mb-4">沒有找到詞卡</p>
            <Link
              href="/generate"
              className="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors"
            >
              創建新詞卡
            </Link>
          </>
        )}
      </div>
    )
  }

  return (
    <div className="space-y-2">
      {searchState.flashcards.map((card: Flashcard) => (
        <FlashcardCard
          key={card.id}
          flashcard={card}
          searchTerm={searchState.filters.search}
          onEdit={() => onEdit(card)}
          onDelete={() => onDelete(card)}
          onFavorite={() => onToggleFavorite(card)}
          onImageGenerate={() => onGenerateExampleImage(card)}
          isGenerating={generatingCards.has(card.id)}
          generationProgress={generationProgress[card.id] || ''}
          highlightSearchTerm={highlightSearchTerm}
        />
      ))}
    </div>
  )
}