import { Fade, Skeleton, Stack, Typography } from '@mui/material';

export default function ProductSkeleton({ count }: { count: number }) {
  return (
    <Fade in>
      <Stack
        direction="column"
        spacing={1}
        sx={{
          alignItems: 'center',
          padding: 4,
          width: 320,
          border: '1px solid',
          borderColor: 'grey.100',
          borderRadius: 1,
          transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
          boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',

          '&:hover': {
            borderColor: '#ddd',
            boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
          },
        }}>
        <Typography component="div" variant="h4" sx={{ width: '50%' }}>
          <Skeleton />
        </Typography>
        <Skeleton variant="text" sx={{ fontSize: '0.875rem', width: '60%' }} />
        <Typography component="div" variant="h3" sx={{ width: '60%' }}>
          <Skeleton />
        </Typography>
        <Typography component="div" variant="h3" sx={{ width: '100%' }}>
          <Skeleton />
        </Typography>
        {Array.from({ length: count }).map((_, i) => (
          // eslint-disable-next-line react/no-array-index-key
          <Skeleton key={i} variant="text" sx={{ fontSize: '0.875rem', width: '60%' }} />
        ))}
      </Stack>
    </Fade>
  );
}