import { vipnagorgialla } from "@/components/Vipnagorgialla";
import Link from "next/link";
import Image from "next/image";
import { getTranslations, setRequestLocale } from "next-intl/server";

interface TournamentCardProps {
  title: string;
  buttonHref: string;
  backgroundImage: string;
  objectPosition?: string;
  className?: string;
}

function TournamentCard({
  title,
  buttonHref,
  backgroundImage,
  objectPosition = "center",
  className = "",
}: TournamentCardProps) {
  return (
    <Link
      href={buttonHref}
      aria-label={title}
      className={`group relative bg-[#0E0F19] border-[#1F5673] flex flex-col items-center justify-center h-full min-h-87.5 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#00A3E0]/40 ${className}`}
    >
      <Image
        src={backgroundImage}
        alt=""
        fill
        sizes="(min-width: 768px) 50vw, 100vw"
        className="object-cover opacity-50 transition-opacity duration-200 group-hover:opacity-40 group-focus-visible:opacity-40"
        style={{ objectPosition }}
      />
      <div className="relative z-10 flex flex-col items-center text-center">
        <h2
          className={`${vipnagorgialla.className} font-bold italic text-[clamp(2rem,1.5rem+3vw,4rem)] leading-none text-[#EEE5E5] uppercase transition-colors duration-200 group-hover:text-[#00A3E0] group-focus-visible:text-[#00A3E0]`}
        >
          {title}
        </h2>
      </div>
    </Link>
  );
}

export default async function Tourney({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations({ locale });
  return (
    <div className="bg-[#0E0F19] min-h-0 flex flex-col flex-1">
      {/* 1x2 Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 auto-rows-fr pt-14 flex-1 min-h-0">
        {/* CS2 */}
        <TournamentCard
          title="COUNTER-STRIKE 2"
          buttonHref="/turniirid/cs2"
          backgroundImage="/images/landing/cs2_tournament.jpg"
          className="border-b-[3px] md:border-b-0 md:border-r-3 min-h-[50vh]"
        />

        {/* LoL */}
        <TournamentCard
          title="LEAGUE OF LEGENDS"
          buttonHref="/turniirid/lol"
          backgroundImage="/images/landing/lol_tournament.png"
          objectPosition="bottom left"
          className="border-b-0 min-h-[50vh]"
        />
      </div>

      {/* Full-width Mini-tournaments */}
      <div className="grid grid-cols-1 auto-rows-fr">
        <TournamentCard
          title={t("expo.miniTournaments.title").toUpperCase()}
          buttonHref="/miniturniirid"
          backgroundImage="/images/miniturniirid/minitournaments.jpg"
          className="border-t-[3px] min-h-[50vh]"
        />
      </div>
    </div>
  );
}