import { Link } from '@inertiajs/react';
import { route } from 'ziggy-js';

interface KeywordBadgeProps {
  keyword: string;
  size?: 'default' | 'lg';
  className?: string;
}

const sizeClasses = {
  default: 'px-2.5 py-0.5 text-xs',
  lg: 'px-3 py-1 text-sm',
};

export function KeywordBadge({ keyword, size = 'default', className = '' }: KeywordBadgeProps) {
  return (
    <Link
      href={route('memes.search', keyword.replace(/\s+/g, '+'))}
      className={`inline-flex items-center rounded-full border border-transparent bg-secondary text-secondary-foreground font-semibold transition-colors hover:bg-purple-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 ${sizeClasses[size]} ${className}`}
    >
      {keyword}
    </Link>
  );
}