import { Box, Skeleton } from '@mui/material'

export function ReminderSkeleton() {
  return (
    <Box className="flex flex-col gap-2">
      {[1, 2, 3, 4, 5].map((i) => (
        <Box
          key={i}
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 2,
            px: 2,
            py: 1.5,
            border: '1px solid #e2e8f0',
            borderRadius: 1,
            bgcolor: 'white',
          }}
        >
          <Skeleton variant="circular" width={8} height={8} />
          <Skeleton variant="text" width={80} height={20} />
          <Skeleton variant="text" width={120} height={20} sx={{ flex: 1 }} />
          <Skeleton variant="text" width={100} height={20} />
          <Skeleton variant="text" width={70} height={20} />
          <Skeleton variant="rounded" width={60} height={22} />
        </Box>
      ))}
    </Box>
  )
}
