import CardContainer from '@design-system/CardContainer';
import Skeleton from '@design-system/Skeleton';
import { Stack, type SxProps } from '@mui/material';

const CARDS_COUNT = 3;

const AudienceSkeleton = ({ sx }: { sx?: SxProps }) => (
  <Stack sx={{ gap: 3, ...sx }}>
    <Stack sx={{ gap: 1 }}>
      <Skeleton sx={{ width: '30%', height: 28 }} />
      <Skeleton sx={{ width: '50%', height: 20 }} />
    </Stack>
    {Array.from({ length: CARDS_COUNT }).map((_, index) => (
      <CardContainer
        key={index}
        fullWidth
        sx={{
          '& .MuiCardContent-root': {
            display: 'flex',
            flexDirection: 'column',
            gap: 1,
          },
        }}
      >
        <Skeleton sx={{ width: '25%', height: 24 }} />
        <Skeleton sx={{ width: '40%', height: 20 }} />
      </CardContainer>
    ))}
  </Stack>
);

export default AudienceSkeleton;