import React from 'react'

export default function HomeTags({ tags }) {
  if (!Array.isArray(tags) || tags.length === 0) return null

  return (
    <section className="mt-14 px-4 sm:px-6 lg:px-8">
      <h2 className="mb-5 text-xl font-bold text-white">🏷️ Popular Tags</h2>

      <div className="flex flex-wrap gap-2">
        {tags.map((tag) => (
          <a
            key={tag.id}
            href={`/tag/${tag.slug}`}
            className="rounded-full bg-nova-800 px-4 py-1.5 text-sm font-medium text-nova-200 transition hover:bg-nova-700 hover:text-white"
          >
            {tag.name}
            {tag.count > 0 && (
              <span className="ml-1.5 text-xs text-soft">{tag.count.toLocaleString()}</span>
            )}
          </a>
        ))}
      </div>
    </section>
  )
}
