import { FilterTabsProps } from "@/constants/types";

export default function FilterTabs({
  options = [],
  activeFilter,
  onChange,
  className = "",
}: FilterTabsProps) {
  if (!Array.isArray(options) || options.length === 0) {
    return null;
  }

  return (
    <div className={`flex items-center gap-2.5 overflow-x-auto no-scrollbar py-1 ${className}`}>
      {options.map((filter) => {
        const isActive = activeFilter === filter.label;

        return (
          <button
            key={filter.label}
            type="button"
            onClick={() => onChange(filter.label)}
            className={`flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-medium transition-all whitespace-nowrap cursor-pointer ${
              isActive
                ? "bg-teal-950/40 text-teal-400 border border-teal-500/50"
                : "bg-[#0b1727] text-slate-400 border border-slate-800/80 hover:text-slate-200"
            }`}
          >
            <span>{filter.label}</span>
            {filter.count !== undefined && (
              <span
                className={`font-mono text-[11px] ${
                  isActive ? "text-teal-400 font-bold" : "text-slate-400"
                }`}
              >
                {filter.count}
              </span>
            )}
          </button>
        );
      })}
    </div>
  );
}