"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { GlassRadioGroup } from "../GlassRadioGroup";
import { Button, Icon } from "../../../components/atoms";
/**
 * Tab Content Molecule Component
 * Generic tab component that combines tab navigation with conditional content rendering
 * Uses render prop pattern for flexible content rendering
 */
export const TabContent = ({ tabsRef, tabContentRef, options, currentTabIndex, pendingTabIndex = null, isTransitioning = false, onChange, name = "tabs", children, className = "", contentClassName = "mt-10", onViewAllClick, testId, }) => {
    return (_jsxs("div", { className: className, "data-testid": testId, children: [_jsxs("div", { ref: tabsRef, style: {
                    flexDirection: "row",
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                }, "data-testid": testId ? `${testId}.tabs` : undefined, children: [_jsx(GlassRadioGroup, { name: name, options: options, selectedValue: currentTabIndex, onChange: onChange, testId: testId ? `${testId}.radioGroup` : undefined }), onViewAllClick && (_jsxs(Button, { variant: "outline", onClick: onViewAllClick, testId: testId ? `${testId}.viewAllButton` : undefined, children: ["View All", _jsx(Icon, { name: "chevronRight", className: "w-4 h-4" })] }))] }), _jsx("div", { ref: tabContentRef, className: contentClassName, style: {
                    opacity: isTransitioning ? 0 : 1,
                    transition: "opacity 0.3s ease-in-out",
                }, "data-testid": testId ? `${testId}.content` : undefined, children: children(pendingTabIndex ?? currentTabIndex) })] }));
};
export default TabContent;
