import { type FC } from 'react';

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

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

const CommentSkeleton: FC = () => (
  <Stack
    direction="row"
    spacing={1.5}
    sx={{ py: 1, alignItems: 'flex-start' }}
  >
    <HuSkeleton
      variant="circular"
      width={40}
      height={40}
    />
    <Stack sx={{ flex: 1, gap: 0.75 }}>
      <HuSkeleton
        variant="rounded"
        width="100%"
        height={130}
      />
      <HuSkeleton
        variant="rounded"
        sx={{ alignSelf: 'flex-end' }}
        width="15%"
        height={12}
      />
    </Stack>
  </Stack>
);

export default CommentSkeleton;