import * as React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

export default function HighlightedCard({ 
    title, 
    value, 
    interval, 
    icon: Icon, 
    iconColor = 'primary.main',
    description 
}) {

    return (
        <Card sx={{ height: '100%' }}>
            <CardContent>
                <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                    {Icon && (
                        <Box 
                            sx={{ 
                                color: iconColor,
                                mr: 1.5,
                                display: 'flex',
                                alignItems: 'center'
                            }}
                        >
                            <Icon sx={{ fontSize: 28 }} />
                        </Box>
                    )}
                    <Typography
                        component="h2"
                        variant="subtitle2"
                        sx={{ fontWeight: '600' }}
                    >
                        {title}
                    </Typography>
                </Box>
                
                <Typography 
                    variant="h4" 
                    component="p" 
                    sx={{ 
                        fontWeight: 'bold',
                        mb: 1,
                        color: 'text.primary'
                    }}
                >
                    {value}
                </Typography>
                
                <Typography 
                    sx={{ 
                        color: 'text.secondary', 
                        fontSize: '0.875rem',
                        mb: description ? '8px' : 0
                    }}
                >
                    {interval}
                </Typography>
                
                {description && (
                    <Typography 
                        sx={{ 
                            color: 'text.secondary', 
                            fontSize: '0.75rem',
                            mt: 1
                        }}
                    >
                        {description}
                    </Typography>
                )}
            </CardContent>
        </Card>
    );
}