interface CategoryBarProps {
  categories: string[];
  selected: string;
  onSelect: (cat: string) => void;
}

const CategoryBar = ({ categories, selected, onSelect }: CategoryBarProps) => {
  return (
    <div className="rounded-2xl border border-slate-300 bg-slate-100 p-3 shadow-sm">
      <div className="flex flex-wrap gap-2">
        {categories.map((cat) => {
          const isSelected = selected === cat;

          return (
            <button
              key={cat}
              type="button"
              onClick={() => onSelect(cat)}
              className="rounded-full border px-4 py-2 text-sm font-semibold tracking-wide transition-all"
              style={{
                borderColor: isSelected ? "#0f6ea8" : "#cbd5e1",
                backgroundColor: isSelected ? "#0f6ea8" : "#ffffff",
                color: isSelected ? "#ffffff" : "#1e293b",
                boxShadow: isSelected
                  ? "0 6px 18px rgba(15,110,168,0.22)"
                  : "0 1px 2px rgba(15,23,42,0.04)",
              }}
            >
              {cat}
            </button>
          );
        })}
      </div>
    </div>
  );
};

export default CategoryBar;