'use client'

import { SearchResult } from './types'

export default function SearchResults({ results, onSelect }: {
  results: SearchResult[]
  onSelect: (result: SearchResult) => void
}) {
  if (results.length === 0) {
    return (
      <div className="text-center py-12">
        <span className="text-4xl">🔍</span>
        <p className="mt-4 text-gray-500 dark:text-gray-400">Keine Ergebnisse gefunden</p>
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {results.map((result) => (
        <button
          key={result.id}
          onClick={() => onSelect(result)}
          className="w-full text-left p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md hover:border-blue-300 transition"
        >
          <div className="flex items-start justify-between">
            <div className="flex-1">
              <h4 className="font-medium text-gray-900 dark:text-white mb-1">{result.title}</h4>
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">{result.bundesland_name} - {result.doc_type}</p>
              <p className="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">{result.snippet}</p>
            </div>
            <div className="ml-4 flex items-center gap-2">
              <span className={`px-2 py-1 text-xs rounded-full ${
                result.relevance_score > 0.8
                  ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                  : result.relevance_score > 0.5
                    ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
                    : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
              }`}>
                {Math.round(result.relevance_score * 100)}%
              </span>
            </div>
          </div>
        </button>
      ))}
    </div>
  )
}