import type { Dictionary } from "@/lib/i18n";

type OnboardingModalProps = {
  onClose: () => void;
  onStart: () => void;
  t: Dictionary;
};

export default function OnboardingModal({ onClose, onStart, t }: OnboardingModalProps) {
  return (
    <div className="fixed inset-0 z-50 flex items-end bg-black/70 p-3 backdrop-blur-sm sm:items-center sm:justify-center">
      <div
        className="w-full overflow-hidden rounded-lg border border-white/10 bg-pitch-950 shadow-2xl sm:max-w-md"
        role="dialog"
        aria-modal="true"
        aria-labelledby="onboarding-title"
      >
        <div className="border-b border-white/10 p-4">
          <p className="text-xs font-black uppercase text-emerald-300">{t.onboardingEyebrow}</p>
          <h2 id="onboarding-title" className="mt-1 text-2xl font-black text-white">
            {t.onboardingTitle}
          </h2>
          <p className="mt-2 text-sm leading-6 text-white/65">{t.onboardingLead}</p>
        </div>

        <div className="grid gap-2 p-4">
          <div className="rounded-lg border border-white/10 bg-white/[0.06] p-3">
            <p className="text-xs font-black uppercase text-white/45">{t.onboardingStepOneTitle}</p>
            <p className="mt-1 text-sm font-semibold text-white">{t.onboardingStepOne}</p>
          </div>
          <div className="rounded-lg border border-white/10 bg-white/[0.06] p-3">
            <p className="text-xs font-black uppercase text-white/45">{t.onboardingStepTwoTitle}</p>
            <p className="mt-1 text-sm font-semibold text-white">{t.onboardingStepTwo}</p>
            <div className="mt-3 flex gap-1">
              <span className="h-5 w-5 rounded bg-emerald-400" title={t.exact} />
              <span className="h-5 w-5 rounded bg-yellow-400" title={t.close} />
              <span className="h-5 w-5 rounded bg-slate-500" title={t.miss} />
            </div>
          </div>
          <div className="rounded-lg border border-white/10 bg-white/[0.06] p-3">
            <p className="text-xs font-black uppercase text-white/45">{t.onboardingStepThreeTitle}</p>
            <p className="mt-1 text-sm font-semibold text-white">{t.onboardingStepThree}</p>
          </div>
        </div>

        <div className="flex gap-2 border-t border-white/10 p-4">
          <button
            type="button"
            onClick={onStart}
            className="h-11 flex-1 rounded-lg bg-emerald-400 px-4 text-sm font-black uppercase text-pitch-950 transition hover:bg-emerald-300"
          >
            {t.playToday}
          </button>
          <button
            type="button"
            onClick={onClose}
            className="h-11 rounded-lg border border-white/15 px-4 text-sm font-black uppercase text-white transition hover:bg-white/10"
          >
            {t.close}
          </button>
        </div>
      </div>
    </div>
  );
}