// components/LanguageModal.tsx
import { ModalWrapper } from "./ModalWrapper";
import { getTranslation } from "@/src/hooks/useTranslation";
import { useLanguage } from "@/src/hooks/LanguageContext";

type Language = "hindi" | "english";

interface LanguageModalProps {
  open: boolean;
  selectedLanguage: Language;
  onSelect: (lang: Language) => void;
  onClose: () => void;
  onContinue: () => void;
}

export function LanguageModal({
  open,
  selectedLanguage,
  onSelect,
  onClose,
  onContinue,
}: LanguageModalProps) {
  if (!open) return null;
  const { language } = useLanguage();
  const text = getTranslation(language).languageModal;

  return (
    <ModalWrapper onClose={()=> {}}>
      <div className="bg-white w-[90%] max-w-sm rounded-2xl p-5 shadow-lg">
        <h2 className="text-center font-semibold border-b pb-3">
          {text.title}
        </h2>

        <div className="mt-4 space-y-3">
          <label className="flex items-center gap-3 cursor-pointer">
            <input
              type="radio"
              name="course-language"
              checked={selectedLanguage === "hindi"}
              onChange={() => onSelect("hindi")}
            />
            {text.hindi}
          </label>

          <label className="flex items-center gap-3 cursor-pointer">
            <input
              type="radio"
              name="course-language"
              checked={selectedLanguage === "english"}
              onChange={() => onSelect("english")}
            />
            {text.english}
          </label>
        </div>

        <button
          onClick={onContinue}
          className="mt-6 w-full bg-orange-500 text-white py-2 rounded-full"
        >
          {text.continue}
        </button>
      </div>
    </ModalWrapper>
  );
}