import { FC } from 'react';

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

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

const HourCategoryCardSkeleton: FC = () => {
  return (
    <CardContainer fullWidth>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 2,
        }}
      >
        <Stack
          sx={{ flex: 1, alignItems: 'center', gap: 2, flexDirection: 'row' }}
        >
          <Skeleton
            variant="circular"
            height={40}
            width={40}
          />
          <Stack sx={{ gap: 1, flex: 1 }}>
            <Skeleton
              width="40%"
              height={22}
              isLoading
            />
            <Skeleton
              width="60%"
              height={17}
              isLoading
            />
          </Stack>
        </Stack>
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 0.5,
          }}
        >
          <Skeleton
            variant="circular"
            height={32}
            width={32}
          />
        </Stack>
      </Stack>
    </CardContainer>
  );
};

export default HourCategoryCardSkeleton;