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

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

/* ============================================================================
   KEYWORD TAG  —  the editorial subject/keyword filter for the creation page.
   ----------------------------------------------------------------------------
   A CLONE of <Tag> (the lowercase pill), restyled to the gallery's chrome:
   rounded + uppercase tracking, ink-fill hover. The original <Tag> is
   intentionally left untouched for its other (legacy) usages — use THIS one
   only on the creation page for now.
   ========================================================================== */

interface KeywordTagProps {
  label: string;
  active?: boolean;
  onClick?: () => void;
  href?: {
    pathname: '/kereses';
    query: {
      tipus: 'alkotas';
      targyszo: number;
      cim: string;
    };
  };
  className?: string;
}

const KeywordTag: React.FC<KeywordTagProps> = ({ label, active, onClick, href, className }) => {
  const baseClassName = cn(
    'inline-flex h-[30px] items-center rounded-full border px-4',
    'text-[10px] font-semibold uppercase tracking-[0.08em] whitespace-nowrap no-underline',
    'transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2',
    'focus-visible:ring-mma-blue focus-visible:ring-offset-2',
    active
      ? 'border-[#151720] bg-[#151720] text-white'
      : 'border-neutral-300 bg-transparent text-[#151720] hover:border-[#151720] hover:bg-[#151720] hover:text-white',
    className
  );

  if (href) {
    return (
      <Link href={href} className={baseClassName}>
        {label}
      </Link>
    );
  }

  return (
    <button type="button" className={baseClassName} onClick={onClick}>
      {label}
    </button>
  );
};

export default KeywordTag;