'use client'

export interface GenreBadgeProps {
  name: string
  onClick?: () => void
  variant?: 'default' | 'outlined' | 'minimal'
  size?: 'sm' | 'md' | 'lg'
}

export function GenreBadge({
  name,
  onClick,
  variant = 'default',
  size = 'md'
}: GenreBadgeProps) {
  const sizeClasses = {
    sm: 'px-2 py-0.5 text-xs',
    md: 'px-3 py-1 text-sm',
    lg: 'px-4 py-2 text-base'
  }

  const variantClasses = {
    default: 'bg-purple-500/20 text-purple-300 hover:bg-purple-500/30',
    outlined: 'bg-transparent border border-purple-500/50 text-purple-300 hover:border-purple-500',
    minimal: 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700'
  }

  const baseClasses = 'rounded-full font-medium transition cursor-pointer whitespace-nowrap'
  const classes = `${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]}`

  return (
    <span
      className={classes}
      onClick={onClick}
    >
      {name}
    </span>
  )
}