import Image from "next/image";
import Link from "next/link";
import type { ReactNode } from "react";
import { ThemeToggle } from "@/components/layout/theme";
export function AuthShell({ children }: { children: ReactNode }) {
  return (
    <main className="relative grid min-h-screen bg-background lg:grid-cols-2">
      <div className="flex min-h-screen flex-col px-6 py-8 sm:px-12">
        <Link href="/" aria-label="TIAR home">
          <Image
            src="/images/logo/logo.svg"
            width={939}
            height={351}
            alt="TIAR"
            className="h-10 w-auto dark:brightness-0 dark:invert"
            priority
          />
        </Link>
        <div className="mx-auto flex w-full max-w-[440px] flex-1 flex-col justify-center py-12">
          {children}
        </div>
        <p className="text-center text-xs text-muted-foreground">
          © 2026 TIAR · Monetization & Reporting
        </p>
      </div>
      <aside className="relative hidden overflow-hidden bg-auth-cover lg:flex lg:items-center lg:justify-center">
        <Image
          src="/images/background/background-02.jpeg"
          alt="Electric vehicle charging"
          fill
          className="object-cover opacity-30"
          priority
          sizes="50vw"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-auth-cover/60 to-transparent" />
        <div className="relative max-w-sm px-8 text-center text-white">
          <Image
            src="/images/logo/logo-icon.svg"
            alt="TIAR"
            width={285}
            height={284}
            className="mx-auto mb-7 h-24 w-24"
          />
          <h2 className="mb-4 text-3xl font-semibold">TIAR</h2>
          <p className="text-lg leading-7 text-white/75">
            Monetization and Reporting System for Your EV Charging Stations
          </p>
        </div>
      </aside>
      <div className="fixed right-5 bottom-5 z-20">
        <ThemeToggle />
      </div>
    </main>
  );
}
export function AuthCard({
  title,
  description,
  children,
}: {
  title: string;
  description: string;
  children: ReactNode;
}) {
  return (
    <section className="rounded-2xl border bg-card p-6 shadow-sm sm:p-8">
      <h1 className="text-3xl font-semibold tracking-tight">{title}</h1>
      <p className="mt-2 mb-7 text-sm leading-6 text-muted-foreground">
        {description}
      </p>
      {children}
    </section>
  );
}