import { Logo } from "@/components/shared/Logo";
import type { ReactNode } from "react";

interface AuthSidePanelProps {
  quote?: string;
  authorName?: string;
  authorRole?: string;
}

export function AuthSidePanel({
  quote = '"Set up branching logic in ten minutes that used to take our team a full sprint."',
  authorName = "Riya Kapoor",
  authorRole = "Head of CX, Northline",
}: AuthSidePanelProps) {
  const initials = authorName
    .split(" ")
    .map((n) => n[0])
    .join("")
    .slice(0, 2);

  return (
    <div className="flex flex-col justify-between bg-gradient-to-br from-navy to-navy-2 p-8 text-white sm:p-14 lg:min-h-screen">
      <Logo textClassName="text-white text-[19px]" />

      <blockquote className="max-w-[420px] text-[22px] font-semibold leading-snug">
        {quote}
      </blockquote>

      <div className="flex items-center gap-2.5">
        <div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-[13px] font-bold text-white">
          {initials}
        </div>
        <div>
          <div className="text-[13px] font-bold">{authorName}</div>
          <div className="text-xs opacity-60">{authorRole}</div>
        </div>
      </div>
    </div>
  );
}

interface AuthLayoutShellProps {
  children: ReactNode;
}

export function AuthLayoutShell({ children }: AuthLayoutShellProps) {
  return (
    <div className="flex min-h-screen flex-col lg:flex-row">
      <div className="lg:flex lg:flex-1">
        <AuthSidePanel />
      </div>
      <div className="flex flex-1 items-center justify-center p-6 sm:p-10">
        <div className="w-full max-w-[400px]">{children}</div>
      </div>
    </div>
  );
}