"use client";

import { memo } from "react";

interface TagButtonProps {
  tag: string;
  tagSlug: string;
  isSelected: boolean;
  onClick?: (tagSlug: string) => void;
}

const TagButton = memo(function TagButton({
  tag,
  tagSlug,
  isSelected,
  onClick,
}: TagButtonProps) {
  return (
    <button
      onClick={() => onClick?.(tagSlug)}
      className={`inline-flex items-center rounded-full px-3 py-1 text-sm font-medium transition-colors ${
        isSelected
          ? "bg-indigo-100 text-indigo-800 hover:bg-indigo-200"
          : "bg-gray-100 text-gray-700 hover:bg-gray-200"
      }`}
    >
      {tag}
    </button>
  );
});

export default TagButton;
