import Link from "next/link";
import ShareButton from "./ShareButton";
import LangSwitch from "./LangSwitch";
import BackButton from "./BackButton";
import { type Lang, dict } from "@/lib/i18n";

type Share = { url: string; title: string; text: string };

// 브랜드 헤더 (대시보드·상세 공용). 경기별 후킹 카피는 상세 페이지에서 별도 노출.
export default function Hero({
  back = false,
  backHistory = false,
  share,
  lang = "ko",
}: {
  back?: boolean;
  backHistory?: boolean; // true면 홈 대신 직전 페이지로 복귀(뒤로가기)
  share?: Share;
  lang?: Lang;
}) {
  const t = dict(lang);
  const home = lang === "en" ? "/?lang=en" : "/";
  return (
    <header className="pt-5 text-center">
      {back && (
        <div className="mb-3 flex items-center justify-between">
          {backHistory ? (
            <BackButton label={t.backPrev} home={home} />
          ) : (
            <Link
              href={home}
              className="flex items-center gap-1.5 rounded-full border border-white/12 bg-white/8 px-[18px] py-[9px] text-[18px] font-bold text-white/85 active:scale-95"
            >
              {t.back}
            </Link>
          )}
          {share && (
            <ShareButton {...share} label={t.share} copiedLabel={t.shareCopied} />
          )}
        </div>
      )}
      <div className="font-impact text-[44px] leading-none tracking-tight">
        TRIPLE PICK <span className="text-[var(--green)]">2026</span>
      </div>
      <div className="relative mt-2">
        <div className="text-[16px] font-extrabold text-[var(--green)]">
          AI Prediction Arena
        </div>
        <div className="absolute right-0 top-1/2 -translate-y-1/2">
          <LangSwitch lang={lang} />
        </div>
      </div>
      <div className="mt-2 inline-block rounded-full border border-white/12 bg-white/8 px-3 py-1 text-[13px] font-semibold text-white/85">
        {t.heroPill}
      </div>
    </header>
  );
}