import Link from 'next/link'
import { slugifyTag } from '@/lib/tags'

interface TagListProps {
  tags: (string | undefined)[]
  variant?: 'default' | 'minimal' | 'colored'
  className?: string
}

export function TagList({ tags, variant = 'default', className = '' }: TagListProps) {
  const validTags = tags.filter(Boolean) as string[]

  if (validTags.length === 0) return null

  const baseClasses =
    'inline-flex items-center font-mono text-xs uppercase border transition-colors'

  const variants = {
    default:
      'px-3 py-1 bg-zinc-900 border-slate-700 text-zinc-400 hover:border-cyan-400 hover:text-cyan-400',
    minimal: 'px-2 py-0.5 border-transparent text-zinc-500 hover:text-cyan-400',
    colored:
      'px-3 py-1 bg-cyan-900 border-cyan-700 text-cyan-300 hover:bg-cyan-800 hover:border-cyan-600',
  }

  return (
    <div className={`flex flex-wrap gap-2 ${className}`}>
      {validTags.map(tag => (
        <Link
          key={tag}
          href={`/tags/${slugifyTag(tag)}`}
          className={`${baseClasses} ${variants[variant]}`}
        >
          <span className="mr-1">#</span>
          {tag}
        </Link>
      ))}
    </div>
  )
}
