import { Stack, Typography } from '@mui/material';
import { times } from 'lodash';

import Skeleton from '../../../design-system/Skeleton';
import {
  adjustedCopetin,
  adjustedDescription,
} from '../../../design-system/Title/constants';

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

const TextInformationSkeleton = ({
  variant = 'M',
  sx = {},
}: TextInformationSkeletonProps) => {
  return (
    <Stack
      sx={{
        gap: 0.5,
        '& .MuiSkeleton-root': {
          display: 'flex',
        },
        ...sx,
      }}
    >
      <Skeleton>
        <Typography variant={adjustedCopetin[variant]}>{'Copetin'}</Typography>
      </Skeleton>
      <Skeleton>
        <Typography variant={`global${variant}`}>
          {'Un título de prueba'}
        </Typography>
      </Skeleton>
      {times(3, index => (
        <Skeleton
          key={index}
          width="80%"
        >
          <Typography
            variant={adjustedDescription[variant]}
            sx={{
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            }}
          >
            {'Loading...'}
          </Typography>
        </Skeleton>
      ))}
    </Stack>
  );
};

export default TextInformationSkeleton;