import type { ReactNode } from "react";
import s from "./Tabs.module.css";

export interface TabItem<T extends string>
{
    value: T;
    label: ReactNode;
}

export interface TabsProps<T extends string>
{
    items: TabItem<T>[];
    value: T;
    onChange: (v: T) => void;
    fullWidth?: boolean;
    "aria-label"?: string;
}

export function Tabs<T extends string>(props: TabsProps<T>)
{
    const { items, value, onChange, fullWidth, "aria-label": ariaLabel } = props;
    const cls = [ s.tabs, fullWidth ? s.fullWidth : "" ].filter(Boolean).join(" ");

    return (
        <div role="tablist" aria-label={ariaLabel} className={cls}>
            {items.map((it) =>
            {
                const active = it.value === value;
                return (
                    <button
                        key={it.value}
                        role="tab"
                        type="button"
                        aria-selected={active}
                        className={[ s.tab, active ? s.tabActive : "" ].filter(Boolean).join(" ")}
                        onClick={() => onChange(it.value)}
                    >
                        {it.label}
                    </button>
                );
            })}
        </div>
    );
}
