import type { ReactNode } from 'react'

export interface AuthCardProps {
  /** Header badge (KernelMark or IconBadge), rendered centered above the title. */
  badge?: ReactNode
  heading: string
  subheading?: ReactNode
  /** Extra header content under the subheading (address chips, notes, ...). */
  headerExtra?: ReactNode
  children: ReactNode
}

/** 440px white card: the single content column of every auth screen. */
export function AuthCard({ badge, heading, subheading, headerExtra, children }: AuthCardProps) {
  return (
    <section className="flex w-full max-w-[460px] flex-col gap-[18px] rounded-card border border-border bg-card p-6 sm:gap-[22px] sm:p-8 lg:max-w-[440px]">
      <header className="flex w-full flex-col items-center gap-3 text-center">
        {badge}
        <h1 className="w-full font-mono text-[21px] font-bold leading-tight tracking-[-0.6px] text-foreground sm:text-[23px]">
          {heading}
        </h1>
        {subheading && <p className="max-w-[340px] text-sm leading-[1.5] text-muted-foreground">{subheading}</p>}
        {headerExtra}
      </header>
      {children}
    </section>
  )
}