import { type FC } from 'react';

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

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

type Props = {
  loading: boolean;
  title: string;
  subtitle?: string;
  copetin: string;
  description: string;
};

const InfoCard: FC<Props> = ({
  title,
  subtitle,
  copetin,
  description,
  loading,
}) => {
  if (loading) {
    return (
      <Stack sx={{ gap: 1, width: 1, minWidth: '255px' }}>
        <Skeleton
          variant="rounded"
          width={186}
          height={38}
        />
        <Skeleton
          variant="rounded"
          width={144}
          height={19}
        />
      </Stack>
    );
  }

  return (
    <>
      <HuTitle
        variant="XL"
        copetin={copetin}
        title={title}
      />
      {subtitle && (
        <Typography
          variant="globalM"
          sx={{
            color: ({ palette }) => palette.new.text.neutral.lighter,
          }}
        >
          {subtitle}
        </Typography>
      )}
      <Typography
        variant="globalXS"
        sx={{
          color: ({ palette }) => palette.new.text.neutral.lighter,
        }}
      >
        {description}
      </Typography>
    </>
  );
};

export default InfoCard;