import { TrendingUp, TrendingDown } from 'lucide-react';
import { StatValue, StatLabel } from '../ui/Typography';

interface StatsCardProps {
    title: string;
    value: string | number;
    change?: number;
    icon: any;
    color?: string;
}

export const StatsCard = ({
    title,
    value,
    change,
    icon: Icon,
    color = 'blue'
}: StatsCardProps) => {
    const colorClasses = {
        blue: 'bg-blue-500',
        green: 'bg-green-500',
        yellow: 'bg-yellow-500',
        red: 'bg-red-500',
        purple: 'bg-purple-500',
    };

    const isPositive = change && change > 0;
    const isNegative = change && change < 0;

    return (
        <div className="card p-4 sm:p-5 lg:p-6 animate-fade-in">
            <div className="flex items-center">
                <div className="flex-shrink-0">
                    <div className={`p-3 sm:p-4 rounded-xl ${colorClasses[color as keyof typeof colorClasses] || colorClasses.blue} shadow-sm`}>
                        <Icon className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
                    </div>
                </div>
                <div className="mr-3 sm:mr-5 w-0 flex-1 min-w-0">
                    <dl>
                        <StatLabel className="truncate">
                            {title}
                        </StatLabel>
                        <dd className="flex items-baseline">
                            <StatValue className="truncate">
                                {typeof value === 'number' ? value.toLocaleString() : value}
                            </StatValue>
                            {change !== undefined && (
                                <div className={`mr-1 sm:mr-2 flex items-baseline text-xs sm:text-sm font-semibold ${isPositive ? 'text-green-600' : isNegative ? 'text-red-600' : 'text-gray-500'
                                    }`}>
                                    {isPositive && <TrendingUp className="h-3 w-3 sm:h-4 sm:w-4 flex-shrink-0 self-center ml-1" />}
                                    {isNegative && <TrendingDown className="h-3 w-3 sm:h-4 sm:w-4 flex-shrink-0 self-center ml-1" />}
                                    <span className="sr-only">
                                        {isPositive ? 'افزایش' : 'کاهش'}
                                    </span>
                                    <span className="truncate">{Math.abs(change)}%</span>
                                </div>
                            )}
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    );
};