import { type ComponentProps } from 'react';

import { IconCash } from '@material-hu/icons/tabler';
import { useTheme } from '@material-hu/mui/styles';

import Pills from '@material-hu/components/design-system/Pills';

import { useLokaliseTranslation } from 'src/utils/i18n';

// Pills injects an inline color on the icon based on the pill type, so the
// brand tint is applied by the icon itself instead of overriding with sx.
const BrandCashIcon = ({
  style,
  ...props
}: ComponentProps<typeof IconCash>) => {
  const theme = useTheme();
  return (
    <IconCash
      {...props}
      style={{ ...style, color: theme.palette.new.text.neutral.brand }}
    />
  );
};

export const ExclusiveBenefitPill = () => {
  const { t } = useLokaliseTranslation('loans');

  return (
    <Pills
      label={t('form.exclusive_benefit')}
      type="neutral"
      customIcon={BrandCashIcon}
      typographySx={{
        color: theme => theme.palette.new.text.neutral.brand,
      }}
      sx={{ alignSelf: 'flex-start' }}
    />
  );
};