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

import { type CardContainerBadgeProps } from '../types';
import { getBadgeProps } from '../utils';

const CardContainerBadge = ({ badge, sx }: CardContainerBadgeProps) => {
  const theme = useTheme();
  const { typography } = theme;
  const badgeProps = getBadgeProps(badge?.type, theme);

  if (!badge || !badgeProps) return null;

  return (
    <Stack
      className="CardContainerBadge-root"
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: badgeProps.backgroundColor,
        borderTop: `1px solid ${badgeProps.borderColor}`,
        py: 0.5,
        px: 2,
        gap: 0.25,
        ...sx,
      }}
    >
      {badge.hasIcon && (
        <badgeProps.icon
          className="CardContainerBadge-icon"
          color={badgeProps.fontColor}
          size={(typography as any).globalXXS.fontSize}
        />
      )}
      <Typography
        className="CardContainerBadge-label"
        sx={{ color: badgeProps.fontColor }}
        variant="globalXXS"
      >
        {badge.label}
      </Typography>
    </Stack>
  );
};

export default CardContainerBadge;
