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

import { type PillsProps } from './types';
import { getPillProps } from './utils';

const Pills = ({
  label,
  type = 'error',
  size = 'medium',
  hasIcon = true,
  customIcon,
  typographySx,
  ...chipProps
}: PillsProps) => {
  const theme = useTheme();
  const pillProps = getPillProps(type, theme);
  const isSmall = size === 'small';
  const PillIcon = customIcon ? customIcon : pillProps.icon;

  return (
    <Chip
      label={
        <Typography
          variant={isSmall ? 'globalXXS' : 'globalXS'}
          fontWeight={'fontWeightSemiBold'}
          sx={{
            margin: 0,
            padding: 0,
            lineHeight: 'normal',
            color: pillProps.fontColor,
            ...typographySx,
          }}
        >
          {label}
        </Typography>
      }
      size={size}
      icon={
        hasIcon && PillIcon ? (
          <PillIcon
            style={{
              color: pillProps.fontColor,
              marginLeft: '0',
              marginRight: '4px',
              fontSize: '14px',
            }}
            width="16px"
          />
        ) : undefined
      }
      clickable={false}
      {...chipProps}
      sx={{
        backgroundColor: pillProps.backgroundColor,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: pillProps.borderColor,
        borderRadius: 2,
        px: isSmall ? 1 : 1.5,
        py: isSmall ? 0.5 : 1,
        '&.MuiChip-root': {
          // Since clickable is false, we need to override the cursor with a more specific selector
          cursor: chipProps.onClick ? 'pointer' : 'default',
        },
        '& .MuiChip-label': {
          px: 0,
        },
        ...(chipProps.disabled && {
          opacity: '1!important',
        }),
        ...chipProps.sx,
      }}
    />
  );
};

export type { PillsProps };

export default Pills;