'use client';

import { Card, CardContent } from '@/components/ui/card';
import { LucideIcon } from 'lucide-react';
import { motion } from 'motion/react';

interface StatsCardProps {
  title: string;
  subtitle?: string;
  value: number | string;
  icon: LucideIcon;
  isLoading?: boolean;
}

export function StatsCard({
  title,
  subtitle,
  value,
  icon: Icon,
  isLoading = false,
}: StatsCardProps) {
  return (
    <motion.div
      whileHover={{ y: -4, scale: 1.02 }}
      transition={{ type: 'spring', stiffness: 400, damping: 17 }}
      className="h-full"
    >
      <Card className="h-full py-6 px-4 transition-colors cursor-pointer">
        <CardContent className="p-0 flex items-center justify-between gap-6">
          <div className="flex flex-col gap-1 min-w-0">
            <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
              {title}
            </h3>
            <div className="flex flex-col">
              {isLoading ? (
                <div className="h-10 w-24 bg-muted rounded-md mt-2 animate-pulse" />
              ) : (
                <>
                  <p className="text-3xl font-bold tracking-tight">{value}</p>
                  {subtitle && (
                    <p className="text-xs text-muted-foreground mt-1 line-clamp-1">{subtitle}</p>
                  )}
                </>
              )}
            </div>
          </div>

          <div className="p-3 rounded-xl bg-primary/10 text-primary shrink-0 group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
            <Icon className="h-6 w-6" />
          </div>
        </CardContent>
      </Card>
    </motion.div>
  );
}