import type React                           from "react"
import      { Card, CardContent }           from "@/components/ui/card"
import      { CardDescription, CardFooter } from "@/components/ui/card"
import      { CardHeader, CardTitle }       from "@/components/ui/card"

export function AuthCard({
  children,
  title,
  description,
  footer,
}: {
  children:     React.ReactNode,
  title?:       React.ReactNode,
  description?: React.ReactNode,
  footer?:      React.ReactNode,
}) {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader className="space-y-1 text-center">
        <div className="flex justify-center items-center mb-4">
          <img
            src="/images/logo-icon.svg"
            alt="Kokotrack Logo"
            title="Kokotrack"
            className="h-10 w-10"
          />
        </div>
        {title && <CardTitle className="text-2xl font-bold">{title}</CardTitle>}
        {description && <CardDescription>{description}</CardDescription>}
      </CardHeader>

      <CardContent>
        {children}
      </CardContent>
      {footer &&
        <CardFooter className="flex justify-center">
          <p className="text-sm text-muted-foreground">
            {footer}
          </p>
        </CardFooter>
      }
    </Card>
  )
}