import React from "react";
import { useTranslation } from "react-i18next";

export default function FilterButtons({ active, onSelect }) {
  const { t } = useTranslation();

  const buttons = [
    { code: "All",     labelKey: "filters.all",     icon: "fa-solid fa-globe" },
    { code: "News",    labelKey: "filters.news",    icon: "fa-solid fa-newspaper" },
    { code: "Friends", labelKey: "filters.friends", icon: "fa-solid fa-user-group" },
    { code: "Events",  labelKey: "filters.events",  icon: "fa-solid fa-calendar-days" },
    { code: "Market",  labelKey: "filters.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">{t(btn.labelKey)}</div>
        </button>
      ))}
    </div>
  );
}
