"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { cn } from "../../../utils/cn";
import { Text } from "../../../components/atoms/Text";
export const Tabs = ({ tabs, defaultTab, className }) => {
    const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);
    const activeTabContent = tabs.find((tab) => tab.id === activeTab)?.content;
    const handleKeyDown = (e, tabId) => {
        if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
            e.preventDefault();
            const currentIndex = tabs.findIndex((tab) => tab.id === tabId);
            const nextIndex = e.key === "ArrowLeft"
                ? (currentIndex - 1 + tabs.length) % tabs.length
                : (currentIndex + 1) % tabs.length;
            setActiveTab(tabs[nextIndex].id);
        }
        else if (e.key === "Home") {
            e.preventDefault();
            setActiveTab(tabs[0].id);
        }
        else if (e.key === "End") {
            e.preventDefault();
            setActiveTab(tabs[tabs.length - 1].id);
        }
    };
    return (_jsxs("div", { className: cn("w-full", className), children: [_jsx("div", { className: "flex border-b border-neutral-200 dark:border-neutral-700", role: "tablist", "aria-label": "Tabs", children: tabs.map((tab) => (_jsx("button", { id: `tab-${tab.id}`, onClick: () => setActiveTab(tab.id), onKeyDown: (e) => handleKeyDown(e, tab.id), className: cn("px-4 py-2 border-b-2 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2", activeTab === tab.id
                        ? "border-primary-500 text-primary-600 dark:text-primary-400"
                        : "border-transparent text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"), role: "tab", "aria-selected": activeTab === tab.id, "aria-controls": `tabpanel-${tab.id}`, tabIndex: activeTab === tab.id ? 0 : -1, children: _jsx(Text, { variant: "body", className: "font-medium", children: tab.label }) }, tab.id))) }), _jsx("div", { id: `tabpanel-${activeTab}`, role: "tabpanel", className: "mt-4", "aria-labelledby": `tab-${activeTab}`, children: activeTabContent })] }));
};
export default Tabs;
