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

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

const ServiceItemsStateChartSkeleton = () => {
  return (
    <Stack
      sx={{
        height: '230px',
        flexDirection: 'row',
        gap: 1,
        pt: 2,
      }}
    >
      <Stack
        sx={{
          height: 1,
          width: '76px',
          gap: '14px',
          justifyContent: 'space-between',
        }}
      >
        <HuSkeleton
          variant="rounded"
          height={23}
          width={76}
        />
        <HuSkeleton
          variant="rounded"
          height={23}
          width={76}
        />
        <HuSkeleton
          variant="rounded"
          height={23}
          width={76}
        />
        <HuSkeleton
          variant="rounded"
          height={23}
          width={76}
        />
        <HuSkeleton
          variant="rounded"
          height={23}
          width={76}
        />
        <HuSkeleton
          variant="rounded"
          height={23}
          width={76}
        />
      </Stack>
      <Stack
        sx={{
          height: 1,
          flex: 1,
          flexDirection: 'column',
          alignItems: 'flex-start',
          position: 'relative',
          gap: '7px',
          maxWidth: 'calc(100% - 84px)',
        }}
      >
        <HuSkeleton
          variant="rounded"
          height={23}
          sx={{
            width: 65,
            maxWidth: '100%',
          }}
        />
        <Divider
          orientation="horizontal"
          sx={{
            width: 1,
            height: '1px',
            opacity: 0.6,
          }}
        />
        <HuSkeleton
          variant="rounded"
          height={23}
          width={193}
        />
        <Divider
          orientation="horizontal"
          sx={{
            width: 1,
            height: '1px',
            opacity: 0.6,
          }}
        />
        <HuSkeleton
          variant="rounded"
          height={23}
          sx={{
            width: 394,
            maxWidth: '100%',
          }}
        />
        <Divider
          orientation="horizontal"
          sx={{
            width: 1,
            height: '1px',
            opacity: 0.6,
          }}
        />
        <HuSkeleton
          variant="rounded"
          height={23}
          sx={{
            width: 60,
            maxWidth: '100%',
          }}
        />
        <Divider
          orientation="horizontal"
          sx={{
            width: 1,
            height: '1px',
            opacity: 0.6,
          }}
        />
        <HuSkeleton
          variant="rounded"
          height={23}
          sx={{
            width: 608,
            maxWidth: '100%',
          }}
        />
        <Divider
          orientation="horizontal"
          sx={{
            width: 1,
            height: '1px',
            opacity: 0.6,
          }}
        />
        <HuSkeleton
          variant="rounded"
          height={23}
          width={32}
        />
      </Stack>
    </Stack>
  );
};

export default ServiceItemsStateChartSkeleton;
