"use client";

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

interface StatCardData {
  label: string;
  value: string | number;
  icon?: LucideIcon;
  iconColor?: string;
  trend?: {
    value: string;
    isPositive: boolean;
  };
  onClick?: () => void;
  isActive?: boolean;
}

interface StatCardsProps {
  stats: StatCardData[];
}

export function StatCards({ stats }: StatCardsProps) {
  return (
    <div className="flex flex-col sm:flex-row gap-3 md:gap-4">
      {stats.map((stat, index) => {
        const Icon = stat.icon;
        const isClickable = !!stat.onClick;

        return (
          <Card
            key={index}
            className={`flex-1 min-w-0 transition-colors ${
              isClickable ? 'cursor-pointer hover:border-primary/50' : ''
            } ${
              stat.isActive ? 'border-primary bg-primary/5' : ''
            }`}
            onClick={stat.onClick}
          >
            <CardContent className="p-3 md:p-4 lg:p-6">
              <div className="flex items-center justify-between">
                <div className="flex-1">
                  <p className="sm:text-xs md:text-sm text-muted-foreground mb-1 md:mb-2 uppercase tracking-wide text-[12px]">
                    {stat.label}
                  </p>
                  <p className="font-bold text-[24px]">
                    {stat.value}
                  </p>
                  {stat.trend && (
                    <p className={`text-[10px] sm:text-xs md:text-sm mt-1 md:mt-2 font-medium ${stat.trend.isPositive ? 'text-green-600' : 'text-red-600'}`}>
                      {stat.trend.value}
                    </p>
                  )}
                </div>
                {Icon && (
                  <Icon
                    className={`w-8 h-8 sm:w-9 sm:h-9 md:w-10 md:h-10 lg:w-12 lg:h-12 opacity-15 ${stat.iconColor || 'text-blue-600'}`}
                  />
                )}
              </div>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
}