"use client"

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
} from "@/components/ui/card"
import { cn } from "@/lib/utils"

export const AUTH_CARD_CLASS = cn(
  "w-full gap-4 border-0 bg-transparent px-4 py-6 shadow-none",
  "sm:gap-5 sm:rounded-none sm:px-8 sm:py-8",
  "sm:text-card-foreground sm:dark:text-mail-text sm:shadow-none"
)

type AuthCardProps = {
  title?: string
  description?: string
  error?: string | null
  children: React.ReactNode
  footer?: React.ReactNode
}

export function AuthBrandMark() {
  return (
    <div className="flex flex-col items-center gap-3 py-4">
      <img
        src="/ultisuite-mark.svg"
        alt=""
        width={72}
        height={72}
        draggable={false}
        className="h-16 w-16 select-none"
        aria-hidden
      />
      <span className="text-2xl font-bold tracking-tight">
        Ulti<span className="landing-gradient-text">Suite</span>
      </span>
    </div>
  )
}

export function AuthCard({
  title,
  description,
  error,
  children,
  footer,
}: AuthCardProps) {
  return (
    <div className="flex flex-1 flex-col items-center justify-center px-4">
      <div className="ultimail-login-card-frame mx-auto w-full max-w-sm">
        <Card className={AUTH_CARD_CLASS}>
          <CardHeader className="gap-4 px-0 text-center sm:px-0">
            <AuthBrandMark />
            {title ? (
              <h1 className="text-lg font-semibold text-foreground">{title}</h1>
            ) : null}
            {description ? (
              <CardDescription>{description}</CardDescription>
            ) : null}
            {error ? (
              <p className="text-sm text-destructive" role="alert">
                {error}
              </p>
            ) : null}
          </CardHeader>

          <CardContent className="px-0 sm:px-0">{children}</CardContent>

          {footer ? (
            <CardFooter className="px-0 sm:px-0">{footer}</CardFooter>
          ) : null}
        </Card>
      </div>
    </div>
  )
}