import { Card, CardBody } from "@nextui-org/react";

type StatCardProps = {
  icon: React.ReactNode;
  label: string;
  value: React.ReactNode;
};

function StatCard({ icon, label, value }: StatCardProps) {
  return (
    <Card className="flex flex-row gap-4 border-0 p-4 shadow-none rounded-sm bg-gray-400/10 dark:bg-white/5">
      <div className="flex size-12 items-center justify-center rounded-none bg-gray-500/10 text-gray-500 dark:bg-white/5 dark:text-white">
        {icon}
      </div>
      <CardBody className="min-w-0 p-0 overflow-visible rounded-sm">
        <p className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500 mb-1">
          {label}
        </p>
        <p className="[overflow-wrap:anywhere] text-base font-bold leading-tight">
          {value}
        </p>
      </CardBody>
    </Card>
  );
}

export default StatCard;