'use client';

import React from 'react';

interface StatCardProps {
  title: string;
  value: string | number;
  icon: string;
  trend?: {
    value: number;
    isPositive: boolean;
  };
  color: string;
}

const StatCard: React.FC<StatCardProps> = ({ title, value, icon, trend, color }) => (
  <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
    <div className="flex items-center justify-between">
      <div>
        <p className="text-sm font-medium text-gray-600">{title}</p>
        <p className="text-2xl font-bold text-gray-900 mt-2">{value}</p>
        {trend && (
          <div className={`flex items-center mt-2 text-sm ${
            trend.isPositive ? 'text-green-600' : 'text-red-600'
          }`}>
            <span className="mr-1">
              {trend.isPositive ? '↗' : '↘'}
            </span>
            <span>{Math.abs(trend.value)}%</span>
            <span className="text-gray-500 ml-1">dari bulan lalu</span>
          </div>
        )}
      </div>
      <div className={`w-12 h-12 rounded-lg flex items-center justify-center text-white text-xl ${color}`}>
        {icon}
      </div>
    </div>
  </div>
);

const QuickStats: React.FC = () => {
  const stats = [
    {
      title: 'Total Peserta',
      value: '1,234',
      icon: '👥',
      trend: { value: 12, isPositive: true },
      color: 'bg-blue-500'
    },
    {
      title: 'Ujian Aktif',
      value: '23',
      icon: '📝',
      trend: { value: 8, isPositive: true },
      color: 'bg-green-500'
    },
    {
      title: 'Bank Soal',
      value: '456',
      icon: '📚',
      trend: { value: 15, isPositive: true },
      color: 'bg-purple-500'
    },
    {
      title: 'Tingkat Kelulusan',
      value: '87%',
      icon: '🎯',
      trend: { value: 3, isPositive: false },
      color: 'bg-orange-500'
    }
  ];

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

export default QuickStats;