"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { cn } from "../../lib/utils";
export function TabView({ activeIndex, onTabChange, className, style, children, }) {
    const handleTabClick = (index) => {
        onTabChange?.({ index });
    };
    // Extract tab headers and content from children
    const tabPanels = React.Children.toArray(children).filter((child) => React.isValidElement(child) && child.type === TabPanel);
    return (_jsxs("div", { className: cn("flex flex-col h-full", className), style: style, children: [_jsx("div", { className: "flex border-b border-gray-200 px-4", children: tabPanels.map((panel, index) => (_jsx("button", { onClick: () => handleTabClick(index), className: cn("px-6 py-3 text-sm font-medium border-b-2 transition-colors", activeIndex === index
                        ? "border-blue-500 text-blue-600 bg-blue-50"
                        : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"), children: panel.props.header }, index))) }), _jsx("div", { className: "flex-1 overflow-auto p-4", children: tabPanels.map((panel, index) => (_jsx("div", { className: cn("h-full", activeIndex === index ? "block" : "hidden"), children: panel.props.children }, index))) })] }));
}
export function TabPanel({ header, children, className }) {
    // This component is used for structure but doesn't render directly
    // The TabView component extracts the props and renders the content
    return null;
}
//# sourceMappingURL=tabs.js.map