import { FC } from 'react';

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

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';

export const CardEventSkeleton: FC = () => {
  return (
    <HuCardContainer
      sx={{
        width: '100%',
      }}
      padding={16}
    >
      <Stack sx={{ flexDirection: 'row', gap: 1 }}>
        <HuSkeleton
          width={126}
          height={84}
        />
        <Stack
          sx={{
            gap: 1,
          }}
        >
          <HuSkeleton
            width={335}
            height={17}
          />
          <HuSkeleton
            width={620}
            height={20}
          />
          <HuSkeleton
            width={620}
            height={20}
          />
        </Stack>
      </Stack>
    </HuCardContainer>
  );
};

export default CardEventSkeleton;