import Link from 'next/link'
import { getPopularTags } from '@/lib/tags'
import { TagBadge } from './tag-badge'

export async function PopularTags({ limit = 5 }: { limit?: number }) {
  const tags = await getPopularTags(limit)

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

  return (
    <div className="border-2 border-slate-700 bg-slate-900 p-6">
      <div className="border-b-2 border-slate-700 pb-3 mb-4">
        <h3 className="font-mono text-sm font-bold uppercase text-cyan-400">POPULAR TAGS</h3>
      </div>
      <div className="space-y-3">
        {tags.map((tag, index) => (
          <Link
            key={tag.slug}
            href={`/tags/${tag.slug}`}
            className="flex items-center justify-between group p-2 border border-slate-700 hover:border-cyan-400 hover:bg-slate-800 transition"
          >
            <div className="flex items-center space-x-3">
              <span className="font-mono text-xs text-zinc-500">[{index + 1}]</span>
              <span className="font-mono text-xs uppercase group-hover:text-cyan-400 transition">
                #{tag.name}
              </span>
            </div>
            <TagBadge count={tag.count} />
          </Link>
        ))}
      </div>
      <Link
        href="/tags"
        className="block mt-4 text-center font-mono text-xs text-cyan-400 hover:text-cyan-300 transition uppercase"
      >
        &gt; VIEW ALL TAGS
      </Link>
    </div>
  )
}
