import { FC } from 'react';

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

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

const list = Array.from(Array(3).keys());

export const BreadcrumbsSkeleton: FC = () => {
  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        gap: 1,
      }}
    >
      {list.map(item => (
        <HuSkeleton
          key={item}
          width={95}
          height={22}
        />
      ))}
    </Stack>
  );
};

export default BreadcrumbsSkeleton;