"use client";

import { Truck } from "lucide-react";

export function AuthCard({
  title,
  subtitle,
  children,
  footer,
}: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
  footer?: React.ReactNode;
}) {
  return (
    <div className="relative overflow-hidden rounded-2xl border bg-surface p-6 shadow-xl shadow-primary/5 sm:p-8">
      <div className="mb-6 flex items-center gap-2.5">
        <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary-hover text-primary-foreground">
          <Truck className="h-4.5 w-4.5" aria-hidden />
        </span>
        <div className="leading-tight">
          <p className="text-sm font-bold text-primary">Kapitano</p>
          <p className="text-[11px] text-muted-foreground">Logistics Operations</p>
        </div>
      </div>
      <div className="space-y-1.5">
        <h1 className="text-lg font-bold text-foreground sm:text-xl">{title}</h1>
        {subtitle ? <p className="text-sm text-muted-foreground">{subtitle}</p> : null}
      </div>
      <div className="mt-6">{children}</div>
      {footer ? <div className="mt-6">{footer}</div> : null}
    </div>
  );
}