import * as React from 'react';

interface TabsProps<T extends string> {
    tabs: T[] | readonly T[];
    activeTab: T;
    onTabClick: (tab: T) => void;
    labels?: Record<T, string>;
}

export const Tabs = <T extends string>({ tabs, activeTab, onTabClick, labels }: TabsProps<T>) => {
    return (
        <div className="border-b border-gray-700">
            <nav className="-mb-px flex space-x-8" aria-label="Tabs">
                {tabs.map(tab => (
                    <button
                        key={tab}
                        onClick={() => onTabClick(tab)}
                        className={
                            `${(activeTab === tab
                                ? 'border-brand-primary text-brand-primary'
                                : 'border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-500')}
                            whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm capitalize transition-colors`
                        }
                    >
                        {labels ? labels[tab] : tab}
                    </button>
                ))}
            </nav>
        </div>
    );
};