import { type FC } from 'react';

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

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

const KeyUpdatePostSkeleton: FC = () => (
  <Stack sx={{ alignItems: 'center' }}>
    <Stack sx={{ width: 576, gap: 2, pt: 2 }}>
      <Stack
        direction="row"
        spacing={2}
        alignItems="center"
      >
        <HuSkeleton
          variant="circular"
          width={48}
          height={48}
        />
        <Stack sx={{ flex: 1, gap: 0.75 }}>
          <HuSkeleton
            variant="rounded"
            width="40%"
            height={16}
          />
          <HuSkeleton
            variant="rounded"
            width="25%"
            height={12}
          />
        </Stack>
      </Stack>
      <HuSkeleton
        variant="rounded"
        width="100%"
        height={260}
      />
      <HuSkeleton
        variant="rounded"
        width="60%"
        height={16}
      />
    </Stack>
  </Stack>
);

export default KeyUpdatePostSkeleton;