import { type FC } from 'react';

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

const SkeletonCatalogItemList: FC = () => {
  return (
    <Stack sx={{ gap: 1.5, mt: 1.5 }}>
      {Array.from({ length: 3 }, (_, i) => (
        <Card
          key={i}
          sx={{
            borderRadius: '16px',
            width: '100%',
            border: '1px solid #F2F4F7',
          }}
        >
          <Stack
            sx={{
              p: 2,
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <Stack
              sx={{ flexDirection: 'row', gap: 1.5, alignItems: 'center' }}
            >
              <Skeleton
                variant="circular"
                width={40}
                height={40}
                animation="wave"
              />
              <Skeleton
                width={200}
                height={24}
                animation="wave"
              />
            </Stack>
          </Stack>
        </Card>
      ))}
    </Stack>
  );
};

export default SkeletonCatalogItemList;
