import React from 'react';
import { twMerge } from 'tailwind-merge';

export enum ContestLabelType {
  Collab = 'collab',
  Community = 'community',
  General = 'general',
  Staff = 'staff',
}

export interface ContestLabelProps {
  type: ContestLabelType;
  text: string;
  className?: string;
}

const contestLabelStyles: Record<ContestLabelType, string> = {
  [ContestLabelType.Staff]:
    'border border-accent-pink border-[1px] bg-none text-accent-pink',
  [ContestLabelType.Collab]: 'bg-accent-yellow text-black',
  [ContestLabelType.Community]: 'bg-accent-purple text-white',
  [ContestLabelType.General]:
    'border border-current border-[1px] bg-none text-foreground-primary',
};

export const ContestLabel: React.FC<ContestLabelProps> = ({
  type,
  text,
  className,
}) => {
  const colorClasses = contestLabelStyles[type];

  return (
    <div
      className={twMerge(
        'inline-block rounded-full px-[8px] py-[3.5px] font-sans text-[10px] leading-[15px] font-medium tracking-[0.4px] uppercase',
        colorClasses,
        className
      )}
    >
      {text}
    </div>
  );
};

export default ContestLabel;