/**
 * 통계 카드 컴포넌트
 * 대시보드 상단 통계 카드 그리드
 */
import React from 'react';
import { Users, Send, Inbox, ShieldAlert } from 'lucide-react';

/**
 * 개별 통계 카드
 */
const StatCard = ({ title, value, icon: Icon, bgColor, iconBg }) => (
  <div className={`${bgColor} rounded-2xl p-5 shadow-lg shadow-gray-200/50`}>
    <div className="flex items-center justify-between">
      <div>
        <p className="text-sm text-gray-500 font-medium">{title}</p>
        <p className="text-3xl font-bold text-gray-800 mt-1">{value || '0'}</p>
      </div>
      <div className={`${iconBg} p-3 rounded-xl`}>
        <Icon className="h-6 w-6 text-white" />
      </div>
    </div>
  </div>
);

/**
 * 통계 카드 그리드
 * @param {Object} props
 * @param {Object} props.stats - 통계 데이터
 */
const StatCards = ({ stats }) => {
  const cards = [
    { 
      title: '전체 사용자', 
      value: stats.userCount?.toLocaleString(), 
      icon: Users, 
      bgColor: 'bg-gradient-to-br from-white to-blue-50', 
      iconBg: 'bg-gradient-to-br from-blue-500 to-indigo-600' 
    },
    { 
      title: '오늘 발송', 
      value: stats.sentToday?.toLocaleString(), 
      icon: Send, 
      bgColor: 'bg-gradient-to-br from-white to-green-50', 
      iconBg: 'bg-gradient-to-br from-green-500 to-emerald-600' 
    },
    { 
      title: '오늘 수신', 
      value: stats.receivedToday?.toLocaleString(), 
      icon: Inbox, 
      bgColor: 'bg-gradient-to-br from-white to-purple-50', 
      iconBg: 'bg-gradient-to-br from-purple-500 to-violet-600' 
    },
    { 
      title: '스팸 차단', 
      value: stats.totalSpam?.toLocaleString(), 
      icon: ShieldAlert, 
      bgColor: 'bg-gradient-to-br from-white to-red-50', 
      iconBg: 'bg-gradient-to-br from-red-500 to-rose-600' 
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      {cards.map((card, index) => (
        <StatCard key={index} {...card} />
      ))}
    </div>
  );
};

export default StatCards;