/**
 * StatCards Component
 *
 * 통계 카드 그리드 컴포넌트
 */

'use client';

import { Card, CardContent } from '@/components/ui/card';
import type { StatCardsProps } from './types';

export function StatCards({ stats, onStatClick }: StatCardsProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      {stats.map((stat, index) => (
        <Card
          key={index}
          className={onStatClick && stat.filterValue ? 'cursor-pointer hover:shadow-md transition-shadow' : ''}
          onClick={() => {
            if (onStatClick && stat.filterValue) {
              onStatClick(stat.filterValue);
            }
          }}
        >
          <CardContent className="p-4 md:p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">
                  {stat.label}
                </p>
                <p className="text-3xl md:text-4xl font-bold mt-2">{stat.value}</p>
              </div>
              {stat.icon && (
                <stat.icon
                  className={`w-10 h-10 md:w-12 md:h-12 opacity-15 ${stat.iconColor || ''}`}
                />
              )}
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

export default StatCards;