import Link from "next/link";
import { Monitor } from "lucide-react";
import { getTranslations } from "next-intl/server";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export interface StudioMobileGateProps {
  /** Matches the studio shell background */
  variant?: "video" | "image";
}

export async function StudioMobileGate({ variant = "video" }: StudioMobileGateProps) {
  const t = await getTranslations("auto.componentsStudioStudioMobileGate");

  const title =
    variant === "video" ? t("titleVideo") : t("titleImage");

  return (
    <div
      className={cn(
        "flex h-screen w-screen flex-col items-center justify-center px-6 text-center text-white",
        variant === "video" ? "bg-[#151823]" : "bg-[#0f111a]"
      )}
    >
      <Monitor
        className="h-24 w-24 text-gray-500"
        strokeWidth={1.25}
        aria-hidden
      />
      <h1 className="mt-8 max-w-md font-heading text-xl font-bold leading-snug sm:text-2xl">
        {title}
      </h1>
      <p className="mt-3 max-w-sm text-sm leading-relaxed text-gray-400">
        {t("description")}
      </p>
      <Button
        asChild
        size="lg"
        className="mt-8 bg-blue-600 hover:bg-blue-700 focus-visible:ring-blue-500"
      >
        <Link href="/dashboard">{t("dashboardCta")}</Link>
      </Button>
    </div>
  );
}
