import { type FC } from 'react';

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

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

export const SharedPostSkeleton: FC = () => (
  <Box sx={{ px: 2 }}>
    <Stack
      sx={{
        gap: 1,
        p: 2,
        borderRadius: theme => theme.shape.borderRadiusL,
        border: theme =>
          `1px solid ${theme.palette.new.border.neutral.default}`,
      }}
    >
      <Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'center' }}>
        <HuSkeleton
          variant="circular"
          width={40}
          height={40}
        />
        <Stack sx={{ flex: 1, gap: 0.5 }}>
          <HuSkeleton
            variant="text"
            width="40%"
            height={16}
          />
          <HuSkeleton
            variant="text"
            width="25%"
            height={14}
          />
        </Stack>
      </Stack>
      <HuSkeleton
        variant="text"
        width="100%"
        height={16}
      />
      <HuSkeleton
        variant="text"
        width="80%"
        height={16}
      />
    </Stack>
  </Box>
);

export default SharedPostSkeleton;