import Image from "next/image";
import Link from "next/link";

function Logo() {
  return (
    <Link href="/login" className="inline-block select-none">
      <Image src="/assets/av-logo.png" alt="BroadcastAV" width={150} height={27} priority />
    </Link>
  );
}

export default function AuthCard({
  title,
  subtitle,
  children,
  footer,
}: {
  title: string;
  subtitle: string;
  children: React.ReactNode;
  footer?: React.ReactNode;
}) {
  return (
    <div className="relative flex min-h-screen items-center justify-center bg-[#F9F9F9] px-4 py-10">
      <div
        className="box-border rounded-2xl bg-white shadow-[0_24px_60px_rgba(15,23,42,0.25)]"
        style={{ width: "560px", minWidth: "560px" }}
      >
        <div className="flex flex-col p-10">
          <Logo />

          <h1 className="mt-6 text-[24px] font-bold leading-[100%] tracking-[0.01em] text-[#000000]">
            {title}
          </h1>
          <p className="mt-1 text-[14px] font-medium leading-[22px] tracking-[0.01em] text-[#4E616A]">
            {subtitle}
          </p>

          <div className="mt-6">{children}</div>

          <p className="mt-10 text-center text-[11px] text-[#98A2B3]">
            {footer ?? "© 2024-2026 BroadcastAV Pty Ltd. All rights reserved."}
          </p>
        </div>
      </div>
    </div>
  );
}