import { FC } from 'react';

import HuChip from '@material-hu/components/design-system/Chip';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { SpecialQuestionType } from 'src/types/performance';
import { useLokaliseTranslation } from 'src/utils/i18n';

type SpecialTemplateChipProps = {
  type: SpecialQuestionType;
};

const SpecialTemplateChip: FC<SpecialTemplateChipProps> = ({ type }) => {
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation('backoffice_only');

  const translationKey =
    type === SpecialQuestionType.GOAL ? 'with_goals' : 'with_competencies';

  return (
    <HuGoThemeProvider>
      <HuChip
        label={t(
          `backoffice_only:templates_autocomplete.${translationKey}`,
        ).toUpperCase()}
        size="small"
        sx={{
          color: theme =>
            type === SpecialQuestionType.GOAL
              ? theme.palette.newBase?.skyBlue[900]
              : theme.palette.newBase?.purple[900],
          backgroundColor: theme =>
            type === SpecialQuestionType.GOAL
              ? theme.palette.newBase?.skyBlue[50]
              : theme.palette.newBase?.purple[50],
        }}
      />
    </HuGoThemeProvider>
  );
};

export default SpecialTemplateChip;