import Typography from '@material-hu/mui/Typography';

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

import type { ConversationCategory } from '../types/retention';
import { getCategoryStyle } from '../utils/categoryMapping';

type CategoryBadgeProps = {
  category: ConversationCategory | null;
};

const CATEGORY_I18N_KEY: Record<ConversationCategory, string> = {
  A: 'tali.category.A',
  B: 'tali.category.B',
  C: 'tali.category.C',
};

export function CategoryBadge({ category }: CategoryBadgeProps) {
  const { t } = useLokaliseTranslation('backoffice_only');

  if (!category) return null;

  const style = getCategoryStyle(category);
  const key = CATEGORY_I18N_KEY[category];

  return (
    <Typography
      component="span"
      variant="globalXS"
      fontWeight="fontWeightSemiBold"
      sx={{
        display: 'inline-flex',
        alignItems: 'center',
        px: 1.25,
        py: 0.5,
        borderRadius: 999,
        backgroundColor: style.bgColor,
        color: style.textColor,
      }}
    >
      {t(key)}
    </Typography>
  );
}