import { useState } from "react";
import type { ReactElement } from "react";

export interface FilterTab {
  id: string;
  label: string;
}

export interface FilterTabsProps {
  tabs: FilterTab[];
  activeTab: string;
  onTabChange: (id: string) => void;
  className?: string;
}

function FilterTabItem({
  tab,
  isActive,
  onClick,
}: {
  tab: FilterTab;
  isActive: boolean;
  onClick: () => void;
}): ReactElement {
  const [hovered, setHovered] = useState(false);

  return (
    <button
      type="button"
      onClick={onClick}
      onMouseEnter={(): void => {
        setHovered(true);
      }}
      onMouseLeave={(): void => {
        setHovered(false);
      }}
      style={{
        padding: "5px 14px",
        borderRadius: 6,
        fontSize: "0.8rem",
        fontWeight: 600,
        color: isActive ? "var(--text)" : hovered ? "var(--text-2)" : "var(--muted)",
        background: isActive ? "var(--surface-2)" : "transparent",
        border: "none",
        cursor: "pointer",
        transition: "color 0.15s ease, background 0.15s ease",
        outline: "none",
      }}
    >
      {tab.label}
    </button>
  );
}

export function FilterTabs({
  tabs,
  activeTab,
  onTabChange,
  className = "",
}: FilterTabsProps): ReactElement {
  return (
    <div
      className={className}
      style={{
        display: "inline-flex",
        gap: 2,
        padding: 3,
        background: "var(--surface)",
        border: "1px solid var(--border)",
        borderRadius: "var(--r)",
      }}
    >
      {tabs.map((tab) => (
        <FilterTabItem
          key={tab.id}
          tab={tab}
          isActive={tab.id === activeTab}
          onClick={(): void => {
            onTabChange(tab.id);
          }}
        />
      ))}
    </div>
  );
}
