import React from 'react';
import { cn } from '../../utils/cn';

export interface StatCardProps {
    title: string;
    value: string | number;
    change?: string;
    icon?: React.ReactNode;
    color?: 'cyan' | 'lime' | 'magenta' | 'gold' | 'orange';
    className?: string;
}

/**
 * StatCard - Dashboard statistics card component
 * Part of Kōdō Design System
 */
export const StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(
    ({ title, value, change, icon, color = 'cyan', className }, ref) => {
        const colorClasses = {
            cyan: 'text-kodo-cyan',
            lime: 'text-kodo-lime',
            magenta: 'text-kodo-magenta',
            gold: 'text-kodo-gold',
            orange: 'text-kodo-orange',
        };

        return (
            <div
                ref={ref}
                className={cn(
                    'bg-kodo-graphite border border-kodo-steel/60 p-6 rounded-xl hover:border-kodo-cyan/40 transition-all duration-300',
                    className
                )}
            >
                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <h3 className="text-sm font-medium text-kodo-secondary">{title}</h3>
                    {icon && <div className={cn('h-4 w-4', colorClasses[color])}>{icon}</div>}
                </div>
                <div className="mt-4">
                    <div className="text-2xl font-bold text-white">{value}</div>
                    {change && (
                        <p className="text-xs text-kodo-secondary mt-1">
                            <span className="text-kodo-lime">{change}</span>
                            {' par rapport au mois dernier'}
                        </p>
                    )}
                </div>
            </div>
        );
    }
);

StatCard.displayName = 'StatCard';
