/**
 * Category Pill Component
 * 
 * Clickable category badge for navigation
 */

import Link from 'next/link';
import type { Category } from '@shinecode/api-client/types';

export interface CategoryPillProps {
  category: Category;
  active?: boolean;
  locale?: string;
}

export function CategoryPill({ category, active = false, locale = 'en' }: CategoryPillProps) {
  const baseStyles =
    'inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold transition-all duration-200 border-2';
  const activeStyles = 'bg-brand-50 border-brand-500 text-brand-700';
  const inactiveStyles =
    'bg-surface border-border text-ink hover:border-brand-400 hover:bg-brand-50 hover:text-brand-700';

  return (
    <Link
      href={`/${locale}/categories/${category.slug}`}
      className={`${baseStyles} ${active ? activeStyles : inactiveStyles}`}
    >
      {category.icon && <span className="text-lg">{category.icon}</span>}
      <span>{category.name}</span>
      {category.booking_volume && category.booking_volume > 0 && (
        <span className="text-xs opacity-70">({category.booking_volume})</span>
      )}
    </Link>
  );
}