"use client";

import React from "react";
import { Check } from "lucide-react";
import { MascotGuide } from "@/components/MascotGuide";
import { useI18n } from "@/lib/i18n";

export const FinishedScreen: React.FC = () => {
  const { t } = useI18n();

  return (
    <div className="relative flex-1 flex flex-col items-center justify-center gap-5 p-6 text-center select-none">
      <div className="w-16 h-16 rounded-full bg-emerald-500/15 border-2 border-emerald-400/70 text-emerald-300 flex items-center justify-center shadow-[0_0_28px_rgba(52,211,153,0.2)]">
        <Check size={34} className="stroke-[3]" />
      </div>

      <div className="max-w-sm space-y-3">
        <h1 className="text-2xl sm:text-3xl font-black text-amber-100 drop-shadow-[0_3px_8px_rgba(0,0,0,0.9)]">
          {t({ en: "Thanks for visiting!", zh: "感谢到访！" })}
        </h1>
        <p className="text-base leading-relaxed font-semibold text-amber-100/90">
          {t({
            en: "Your portrait is ready to take with you. You can close this page now.",
            zh: "您的万圣武道照已准备好带回家，现在可以关闭此页面。",
          })}
        </p>
      </div>

      <MascotGuide pose="bow" size="sm" animate={false} />
    </div>
  );
};