const ChartSkeleton = () => (
  <Box sx={{
    backgroundColor: '#fff',
    borderRadius: '8px',
    padding: '20px',
    marginBottom: '20px',
    position: 'relative'
  }}>
    <Box sx={{ position: 'absolute', right: '20px', top: '20px' }}>
      <Skeleton variant="circular" width={16} height={16} />
    </Box>

    <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
      <Skeleton variant="text" width="40%" height={30} />
      <Skeleton variant="text" width="30%" height={30} />
    </Box>

    <Skeleton variant="rectangular" width="100%" height={300} />

    <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2, gap: 2 }}>
      {[1, 2, 3, 4].map((_, i) => (
        <Skeleton key={i} variant="rounded" width={80} height={36} />
      ))}
    </Box>
  </Box>
);