import type { ReactNode } from "react";
import Link from "next/link";
import { JusticeScale01Icon } from "@hugeicons/core-free-icons";

import { AppLogo } from "@/components/shared/app-logo";
import { Icon } from "@/components/shared/icon";
import { Card, CardContent } from "@/components/ui/card";

type AuthShellProps = {
  eyebrow: string;
  title: string;
  description: string;
  alternateHref: string;
  alternateLabel: string;
  alternateAction: string;
  children: ReactNode;
};

export function AuthShell({
  eyebrow,
  title,
  description,
  alternateHref,
  alternateLabel,
  alternateAction,
  children,
}: AuthShellProps) {
  return (
    <main className="flex min-h-screen items-center justify-center px-4 py-10 sm:px-6">
      <div className="grid w-full max-w-6xl gap-6 lg:grid-cols-[0.95fr_1.05fr]">
        <Card className="overflow-hidden border-transparent bg-[linear-gradient(160deg,rgba(125,74,39,0.97),rgba(15,118,110,0.93))] text-white">
          <CardContent className="flex h-full flex-col justify-between gap-10 p-8 sm:p-10">
            <div className="space-y-8">
              <AppLogo className="[&_p]:text-white/70 [&_h1]:text-white" />
              <div className="space-y-4">
                <span className="inline-flex rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-semibold text-white/90">
                  {eyebrow}
                </span>
                <h1 className="text-4xl font-bold leading-[1.35]">{title}</h1>
                <p className="max-w-xl text-base leading-8 text-white/78 sm:text-lg">
                  {description}
                </p>
              </div>
            </div>

            <div className="rounded-[28px] border border-white/15 bg-white/10 p-5 backdrop-blur">
              <div className="flex items-start gap-4">
                <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white/12">
                  <Icon icon={JusticeScale01Icon} size={24} className="text-white" />
                </div>
                <div className="space-y-2">
                  <h2 className="text-lg font-semibold">بداية مرتبة وواضحة</h2>
                  <p className="text-sm leading-7 text-white/72">
                    الواجهة دي معمولة للمحامين والفرق الصغيرة اللي محتاجة تدخل
                    بسرعة وتبدأ شغلها من غير تعقيد.
                  </p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="bg-[color:rgba(255,250,244,0.92)]">
          <CardContent className="p-6 sm:p-8 lg:p-10">
            <div className="space-y-8">
              {children}
              <p className="text-center text-sm text-[var(--foreground-muted)]">
                {alternateLabel}{" "}
                <Link
                  href={alternateHref}
                  className="font-semibold text-[var(--primary)] hover:text-[var(--primary-strong)]"
                >
                  {alternateAction}
                </Link>
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </main>
  );
}