import { Stack, useTheme } from '@mui/material';

import Title from '../../../design-system/Title';
import { adjustedDescription } from '../../../design-system/Title/constants';
import SeeMoreText from '../../SeeMoreText';

import TextInformationSkeleton from './skeleton';
import { type TextInformationProps } from './types';

const TextInformation = ({
  copetin,
  title,
  description,
  variant = 'M',
  loading = false,
  slotProps = {},
  sx = {},
}: TextInformationProps) => {
  const { palette } = useTheme();

  if (loading) {
    return (
      <TextInformationSkeleton
        variant={variant}
        sx={sx}
      />
    );
  }

  return (
    <Stack sx={sx}>
      <Title
        variant={variant}
        copetin={copetin}
        title={title}
        {...slotProps.title}
      />
      {!!description && (
        <SeeMoreText
          text={description}
          {...slotProps.seeMoreText}
          typographyProps={{
            variant: adjustedDescription[variant],
            color: palette.new.text.neutral.lighter,
            ...slotProps.seeMoreText?.typographyProps,
          }}
        />
      )}
    </Stack>
  );
};

export default TextInformation;