import React from 'react';
import { Card, CardContent, Typography, Box } from '@mui/material';

const StatCard = ({ title, value, icon, color = 'primary' }) => {
    return (
        <Card
            elevation={0}
            sx={{
                borderRadius: '16px', // Matches the new theme card radius
                border: '1px solid rgba(226, 232, 240, 0.6)',
                bgcolor: '#ffffff',
                transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
                '&:hover': {
                    transform: 'translateY(-2px)',
                    boxShadow: '0 12px 24px -10px rgba(0,0,0,0.04)',
                    borderColor: 'primary.main',
                    '& .stat-icon': {
                        color: 'primary.main',
                        transform: 'scale(1.1)',
                    }
                }
            }}
        >
            <CardContent sx={{ display: 'flex', alignItems: 'center', p: 3, '&:last-child': { pb: 3 } }}>
                <Box sx={{ mr: 2.5, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Box className="stat-icon" sx={{
                        color: 'text.secondary',
                        opacity: 0.6,
                        transition: 'all 0.2s ease',
                        display: 'flex',
                        fontSize: 24
                    }}>
                        {icon}
                    </Box>
                </Box>
                <Box>
                    <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600, display: 'block', mb: 0.25, letterSpacing: '0.02em', textTransform: 'uppercase' }}>
                        {title}
                    </Typography>
                    <Typography variant="h5" sx={{ color: 'text.primary', fontWeight: 800 }}>
                        {value}
                    </Typography>
                </Box>
            </CardContent>
        </Card>
    );
};

export default StatCard;
