import Link from 'next/link';

interface BlogTagsProps {
  tags: string[];
}

export const BlogTags = ({ tags }: BlogTagsProps) => {
  if (tags.length === 0) {
    return null;
  }

  return (
    <div className="pt-4">
      <h4 className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">
        Popular Tags
      </h4>
      <div className="flex flex-wrap gap-2">
        {tags.map((tag) => (
          <Link
            key={tag}
            href={`/blog?tag=${tag}`}
            className="px-3 py-1 rounded-full bg-[#111827] border border-white/10 text-xs text-gray-400 hover:text-white hover:border-violet-500/50 transition-colors"
          >
            #{tag}
          </Link>
        ))}
      </div>
    </div>
  );
};
