import type { TabPaneProps, TabsProps } from 'antd';
import { Tabs } from 'antd';
import React from 'react';
import useSettings from '../vm-hooks/useSettings';
import './style';
const { TabPane } = Tabs;

const SubTabs = (props: TabsProps) => {
    const { theme } = useSettings();
    return (
        <Tabs {...props} className={`vtx-sub-tabs ${theme}`} type="card">
            {props.children}
        </Tabs>
    );
};

interface SubTabPaneProps extends TabPaneProps {
    subKey: string;
}

export const SubTabPane = (props: SubTabPaneProps) => {
    const { subKey, children, ...ext } = props;
    return (
        <TabPane key={subKey} {...ext} className="tab-pane">
            {children}
        </TabPane>
    );
};

export const SubTabsLine = (props: TabsProps) => {
    const { theme } = useSettings();
    return (
        <Tabs {...props} className={`vtx-sub-tabs-line ${theme}`}>
            {props.children}
        </Tabs>
    );
};

export default SubTabs;
