import { cn } from '@/lib/utils';

import { Link } from '@/i18n/navigation';

interface TagProps {
  label: string;
  active?: boolean;
  onClick?: () => void;
  href?: string;
  className?: string;
  isGrouped?: boolean;
}

const Tag: React.FC<TagProps> = ({ label, active, onClick, href, className, isGrouped }) => {
  const baseClassName = cn(
    !isGrouped && 'rounded-full',
    'py-1.5 xl:py-2 px-3 xl:px-4 transition group inline-flex items-center',
    active ? 'bg-mma-blue hover:bg-mma-yellow' : 'bg-neutral-200 hover:bg-mma-yellow',
    className
  );

  const labelClassName = cn(
    'lowercase text-xs xl:text-sm font-bold transition group-hover:text-neutral-700 whitespace-nowrap',
    active ? 'text-white' : 'text-mma-blue'
  );

  const content = <div className={labelClassName}>{label}</div>;

  if (href) {
    return (
      <Link href={href as never} className={baseClassName}>
        {content}
      </Link>
    );
  }

  return (
    <button className={baseClassName} onClick={onClick}>
      {content}
    </button>
  );
};

export default Tag;