import { TitleSuggestion } from '@/hooks/use-title-suggestions'
import { Sparkles, X } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useLanguage } from '@/lib/i18n'

interface TitleSuggestionsProps {
  suggestions: TitleSuggestion[]
  onSelect: (title: string) => void
  onDismiss: () => void
}

export function TitleSuggestions({ suggestions, onSelect, onDismiss }: TitleSuggestionsProps) {
  const { t } = useLanguage()

  if (suggestions.length === 0) return null

  return (
    <div className="mt-2 p-3 bg-amber-50 dark:bg-amber-950 border border-amber-200 dark:border-amber-800 rounded-lg animate-in fade-in slide-in-from-top-2 duration-300">
      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center gap-2 text-sm font-medium text-amber-900 dark:text-amber-100">
          <Sparkles className="w-4 h-4" />
          <span>{t('titleSuggestions.title')}</span>
        </div>
        <button
          onClick={onDismiss}
          className="text-amber-600 hover:text-amber-900 dark:text-amber-400 dark:hover:text-amber-200 transition-colors"
        >
          <X className="w-4 h-4" />
        </button>
      </div>

      <div className="space-y-1">
        {suggestions.map((suggestion, index) => (
          <button
            key={index}
            onClick={() => onSelect(suggestion.title)}
            className={cn(
              "w-full text-left px-3 py-2 rounded-md transition-all",
              "hover:bg-amber-100 dark:hover:bg-amber-900",
              "text-sm text-amber-900 dark:text-amber-100",
              "border border-transparent hover:border-amber-300 dark:hover:border-amber-700"
            )}
          >
            <div className="flex items-start justify-between gap-2">
              <span className="font-medium">{suggestion.title}</span>
              <span className="text-xs text-amber-600 dark:text-amber-400 whitespace-nowrap">
                {suggestion.confidence}%
              </span>
            </div>
            {suggestion.reasoning && (
              <p className="text-xs text-amber-700 dark:text-amber-300 mt-1">
                {suggestion.reasoning}
              </p>
            )}
          </button>
        ))}
      </div>
    </div>
  )
}