import React from "react";

export default function TimeFilterButtons({ active, onSelect }) {
  const buttons = [
    { code: "NOW",    label: "Now",    icon: "fa-solid fa-bolt" },
    { code: "TODAY",  label: "Today",  icon: "fa-solid fa-sun" },
    { code: "RECENT", label: "Recent", icon: "fa-solid fa-clock-rotate-left" },
    { code: "PAST",   label: "Past",   icon: "fa-solid fa-hourglass-half" },
  ];

  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>
  );
}
