import { type FC, type ReactNode } from 'react'

interface StatCardProps {
    icon: ReactNode
    title: string
    value: string
    subtitle?: string
    color?: string
}

const StatCard: FC<StatCardProps> = ({
    icon,
    title,
    value,
    subtitle,
    color = '#6B7FED'
}) => {
    return (
        <div className='bg-white rounded-3xl p-6 flex flex-col items-center justify-center shadow-sm min-h-[150px] transition-all hover:shadow-md'>
            <div
                className='w-12 h-12 rounded-2xl flex items-center justify-center mb-3'
                style={{ backgroundColor: `${color}15` }}
            >
                {icon}
            </div>
            <h3 className='text-sm font-medium mb-1.5 text-gray-900'>
                {title}
            </h3>
            <div className='flex flex-col items-center gap-0.5'>
                <p className='text-sm text-gray-600'>{value}</p>
                {subtitle && (
                    <span className='text-xs text-gray-400'>{subtitle}</span>
                )}
            </div>
        </div>
    )
}

export default StatCard

