import React from "react";

export default function FilterButtons({ active, onSelect }) {
  const buttons = [
    { code: "All",     label: "All",     icon: "fa-solid fa-globe" },
    { code: "News",    label: "News",    icon: "fa-solid fa-newspaper" },
    { code: "Friends", label: "Friends", icon: "fa-solid fa-user-group" },
    { code: "Events",  label: "Events",  icon: "fa-solid fa-calendar-days" },
    { code: "Market",  label: "Market",  icon: "fa-solid fa-chart-line" },
  ];

  return (
    <div className="sw-icon-column">
      {buttons.map((btn) => (
        <button
          key={btn.code}
          type="button"
          className={"sw-icon-btn" + (active === btn.code ? " sw-icon-active" : "")}
          onClick={() => onSelect && onSelect(btn.code)}
        >
          <div className="sw-icon-circle">
            <i className={btn.icon} />
          </div>
          <div className="sw-icon-label">{btn.label}</div>
        </button>
      ))}
    </div>
  );
}
