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';

const RadioSkeleton = () => (
  <Stack sx={{ flexDirection: 'row', gap: 1, width: '100%' }}>
    <HuSkeleton
      variant="circular"
      height={22}
      width={22}
    />
    <Stack sx={{ gap: 1, width: '100%' }}>
      <HuSkeleton
        width="23%"
        height={19}
        isLoading
      />
      <HuSkeleton
        width="100%"
        height={17}
      />
    </Stack>
  </Stack>
);

const OptionsSkeleton: FC = () => {
  return (
    <Stack sx={{ gap: 2 }}>
      <HuCardContainer fullWidth>
        <RadioSkeleton />
      </HuCardContainer>
      <HuCardContainer fullWidth>
        <RadioSkeleton />
      </HuCardContainer>
    </Stack>
  );
};

export default OptionsSkeleton;