import CardContainer from '@design-system/CardContainer';
import Skeleton from '@design-system/Skeleton';
import Stack from '@mui/material/Stack';

import { type SatisfactionStatsHeaderSkeletonProps } from './types';

const SatisfactionStatsHeaderSkeleton = ({
  slotProps = {},
}: SatisfactionStatsHeaderSkeletonProps) => {
  return (
    <CardContainer
      padding={24}
      fullWidth
    >
      <Stack
        {...slotProps.root}
        sx={{ gap: 2, width: '100%', ...slotProps.root?.sx }}
      >
        <Stack
          direction="row"
          alignItems="center"
          justifyContent="space-between"
          sx={{ mb: 1 }}
        >
          <Skeleton
            width="40%"
            height={28}
          />
        </Stack>
        <Stack sx={{ flexDirection: 'row', gap: 4 }}>
          <Skeleton
            width={60}
            height={72}
            sx={{ flexShrink: 0 }}
          />
          <Stack sx={{ gap: 1, width: '100%' }}>
            <Skeleton
              width="25%"
              height={20}
            />
            <Skeleton
              width="100%"
              height={16}
            />
            <Skeleton
              width="40%"
              height={14}
            />
          </Stack>
        </Stack>
      </Stack>
    </CardContainer>
  );
};

export default SatisfactionStatsHeaderSkeleton;
