import { type FC } from 'react';

import Card from '@material-hu/mui/Card';
import CardContent from '@material-hu/mui/CardContent';
import Grid from '@material-hu/mui/Grid';
import Skeleton from '@material-hu/mui/Skeleton';
import Stack from '@material-hu/mui/Stack';

const SkeletonCatalogItemCard: FC = () => {
  return (
    <Grid
      container
      spacing={3}
      sx={{ mt: 1.5 }}
    >
      {Array.from({ length: 3 }, (_, i) => (
        <Grid
          item
          xs={12}
          sm={6}
          md={4}
          key={i}
        >
          <Card
            sx={{
              borderRadius: '20px',
              width: '100%',
              height: '184px',
            }}
          >
            <Skeleton
              sx={{ width: '100%', height: '80px' }}
              animation="wave"
              variant="rectangular"
            />
            <CardContent sx={{ p: 2, height: '104px' }}>
              <Stack sx={{ gap: 1 }}>
                <Skeleton
                  sx={{ width: '100px', height: '24px' }}
                  animation="wave"
                />
                <Stack sx={{ gap: 0.4 }}>
                  <Skeleton
                    sx={{ width: '100%', height: '20px' }}
                    animation="wave"
                  />
                  <Skeleton
                    sx={{ width: '100%', height: '20px' }}
                    animation="wave"
                  />
                </Stack>
              </Stack>
            </CardContent>
          </Card>
        </Grid>
      ))}
    </Grid>
  );
};

export default SkeletonCatalogItemCard;
