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

export default function TimeFilterButtons({ activeHours, onSelect }) {
  const { t } = useTranslation();

  const buttons = [
    { hours: 3, labelKey: "time_filter.now", icon: "fa-solid fa-bolt" },
    { hours: 24, labelKey: "time_filter.today", icon: "fa-solid fa-sun" },
    { hours: 96, labelKey: "time_filter.recents", icon: "fa-solid fa-calendar-days" },
    { hours: 336, labelKey: "time_filter.old", icon: "fa-solid fa-hourglass-half" },
  ];

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