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

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