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

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

const MidCircleSkeleton = ({
  sx,
  copetin,
  title,
  description,
}: MidCircleSkeletonProps) => {
  const showTitle = copetin || title || description;

  return (
    <Stack
      className="MidCircleSkeleton-root"
      sx={{
        flexDirection: 'column',
        alignItems: 'center',
        gap: 2,
        ...sx,
      }}
    >
      <Skeleton
        width={160}
        height={90}
      />
      {showTitle && (
        <Stack sx={{ gap: 0.5, alignItems: 'center' }}>
          {copetin && (
            <Skeleton
              height={16}
              width={100}
            />
          )}
          {title && (
            <Skeleton
              height={24}
              width={200}
            />
          )}
          {description && (
            <Skeleton
              height={20}
              width={100}
            />
          )}
        </Stack>
      )}
    </Stack>
  );
};

export default MidCircleSkeleton;