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

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

import { type CompetitionStatus } from '../../types';

const STATUS_PILL_TYPE: Record<
  CompetitionStatus,
  React.ComponentProps<typeof HuPills>['type']
> = {
  DRAFT: 'neutral',
  ENROLLING: 'info',
  SCHEDULED: 'warning',
  ACTIVE: 'success',
  FINISHED: 'highlight',
};

const STATUS_KEYS: Record<CompetitionStatus, string> = {
  DRAFT: 'admin.status.draft',
  ENROLLING: 'admin.status.enrolling',
  SCHEDULED: 'competition.status.scheduled',
  ACTIVE: 'competition.status.active',
  FINISHED: 'competition.status.finished',
};

interface Props {
  status: CompetitionStatus;
}

const CompetitionStatusPill = ({ status }: Props) => {
  const { t } = useLokaliseTranslation('sportsPool');

  return (
    <HuPills
      label={t(STATUS_KEYS[status])}
      size="small"
      type={STATUS_PILL_TYPE[status]}
      hasIcon={false}
    />
  );
};

export default CompetitionStatusPill;