/**
 * Composant carte de statistiques pour le dashboard
 */

import React from 'react';
import { Card } from 'primereact/card';
import { Badge } from 'primereact/badge';
import { Skeleton } from 'primereact/skeleton';

interface StatsCardProps {
  title: string;
  value: number | string;
  icon: string;
  color: 'primary' | 'success' | 'info' | 'warning' | 'danger';
  loading?: boolean;
  subtitle?: string;
  trend?: {
    value: number;
    isPositive: boolean;
  };
}

const StatsCard: React.FC<StatsCardProps> = ({
  title,
  value,
  icon,
  color,
  loading = false,
  subtitle,
  trend
}) => {
  const getColorClass = (color: string) => {
    switch (color) {
      case 'primary': return 'text-blue-500';
      case 'success': return 'text-green-500';
      case 'info': return 'text-cyan-500';
      case 'warning': return 'text-yellow-500';
      case 'danger': return 'text-red-500';
      default: return 'text-blue-500';
    }
  };

  const getBgClass = (color: string) => {
    switch (color) {
      case 'primary': return 'bg-blue-100';
      case 'success': return 'bg-green-100';
      case 'info': return 'bg-cyan-100';
      case 'warning': return 'bg-yellow-100';
      case 'danger': return 'bg-red-100';
      default: return 'bg-blue-100';
    }
  };

  if (loading) {
    return (
      <Card className="h-full">
        <div className="flex align-items-center justify-content-between mb-3">
          <Skeleton width="60%" height="1rem" />
          <Skeleton width="2rem" height="2rem" borderRadius="50%" />
        </div>
        <Skeleton width="40%" height="2rem" className="mb-2" />
        <Skeleton width="80%" height="1rem" />
      </Card>
    );
  }

  return (
    <Card className="h-full">
      <div className="flex align-items-center justify-content-between mb-3">
        <div>
          <div className="text-500 font-medium text-xl mb-2">{title}</div>
          <div className="text-900 font-bold text-2xl">
            {typeof value === 'number' ? value.toLocaleString() : value}
          </div>
          {subtitle && (
            <div className="text-500 text-sm mt-1">{subtitle}</div>
          )}
        </div>
        <div className={`${getBgClass(color)} border-round-lg p-3`}>
          <i className={`${icon} ${getColorClass(color)} text-2xl`} />
        </div>
      </div>
      
      {trend && (
        <div className="flex align-items-center">
          <Badge
            value={`${trend.isPositive ? '+' : ''}${trend.value}%`}
            severity={trend.isPositive ? 'success' : 'danger'}
            className="mr-2"
          />
          <span className="text-500 text-sm">
            {trend.isPositive ? 'Augmentation' : 'Diminution'} ce mois
          </span>
        </div>
      )}
    </Card>
  );
};

export default StatsCard;