import { useTranslation } from "react-i18next"

interface LanguageDetectionModalProps {
  detectedLanguage: string
  onSwitch: () => void
  onStay: () => void
}

export default function LanguageDetectionModal({
  detectedLanguage,
  onSwitch,
  onStay,
}: LanguageDetectionModalProps) {
  const { t, i18n } = useTranslation()

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-1000">
      <div className="bg-white p-6 rounded-xl shadow-md max-w-md w-full mx-4">
        <h2 className="text-xl font-semibold text-center mb-4">
          {t("languageDetection.title")}
        </h2>
        <p className="text-gray-600 text-center mb-6">
          {t("languageDetection.message", { 
            language: t(`languageDetection.languages.${detectedLanguage.toLowerCase()}`)
          })}
        </p>
        <div className="flex flex-col sm:flex-row gap-3">
          <button
            onClick={onSwitch}
            className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md font-semibold hover:bg-blue-700 transition-colors"
          >
            {t("languageDetection.switchTo", { 
              language: t(`languageDetection.languages.${detectedLanguage.toLowerCase()}`)
            })}
          </button>
          <button
            onClick={onStay}
            className="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-md font-semibold hover:bg-gray-300 transition-colors"
          >
            {t(`languageDetection.stayIn${i18n.language.toLowerCase().split("-")[0]}`)}
          </button>
        </div>
      </div>
    </div>
  )
}
