import type { LucideIcon } from "lucide-react";
import type { ReactNode } from "react";

import { AppCard } from "@/components/ui/app-card";
import { CardContent } from "@/components/ui/card";

type StatsCardProps = {
  title: string;
  value: string;
  icon?: LucideIcon;
  description?: string;
  footer?: ReactNode;
  className?: string;
};

export function StatsCard({
  title,
  value,
  icon: Icon,
  description,
  footer,
  className,
}: StatsCardProps) {
  return (
    <AppCard level={3} layer="single" className={className}>
      <CardContent className="p-3">
        <div className="flex items-center gap-3">
          {Icon ? (
            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-nested border border-border bg-muted/50 text-muted-foreground">
              <Icon className="h-4 w-4" />
            </div>
          ) : null}
          <div className="min-w-0">
            <p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">{title}</p>
            <p className="mt-1 text-lg font-semibold text-foreground">{value}</p>
          </div>
        </div>

        {description ? (
          <p className="mt-2 text-sm text-muted-foreground">{description}</p>
        ) : null}

        {footer ? <div className="mt-2">{footer}</div> : null}
      </CardContent>
    </AppCard>
  );
}