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

import PropertySkeleton from './skeleton';
import { type PropertyProps } from './types';

const Property = ({
  Icon,
  title,
  description,
  visible = true,
  variant = 'XS',
  loading = false,
}: PropertyProps) => {
  const { typography } = useTheme();

  if (!visible) return null;

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

  const globalVariant = `global${variant}` as const;
  const font = (typography as any)[globalVariant];
  const isDescriptionString = !!description && typeof description === 'string';
  const isDescriptionNode = !!description && typeof description !== 'string';

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 0.5,
      }}
    >
      {!!Icon && <Icon size={font.fontSize} />}
      {!!title && (
        <Typography
          component="span"
          variant={globalVariant}
          fontWeight="fontWeightSemiBold"
        >
          {`${title}${description ? ':' : ''}`}
        </Typography>
      )}
      {isDescriptionString && (
        <Typography
          component="span"
          variant={globalVariant}
        >
          {description}
        </Typography>
      )}
      {isDescriptionNode && description}
    </Stack>
  );
};

export default Property;