import clsx from "clsx";

import Typography from "../Typography/Typography";

import styles from "./TabBar.module.scss";

export type Tab<T extends string> = {
  label: string;
  value: T;
};

type TabBarProps<T extends string> = {
  tabs: Tab<T>[];
  active: T;
  onChange: (value: T) => void;
  className?: string;
};

export default function TabBar<T extends string>({
  tabs,
  active,
  onChange,
  className,
}: TabBarProps<T>) {
  return (
    <nav className={clsx(styles.tabBar, className)}>
      {tabs.map(tab => {
        const isActive = tab.value === active;
        return (
          <button
            key={tab.value}
            className={clsx(styles.tab, { [styles.active]: isActive })}
            onClick={() => onChange(tab.value)}
            type="button"
          >
            <Typography
              color={isActive ? "black" : "secondary"}
              size="md"
              weight="semiBold"
            >
              {tab.label}
            </Typography>
          </button>
        );
      })}
    </nav>
  );
}
