import { PropsWithChildren, ElementType, ReactNode } from 'react';
import { BaseProps } from '../types.cjs';
import '@emotion/react';

type TabsBaseProps = PropsWithChildren & {
    /**
     * 최초로 활성화될 탭의 인덱스
     * @default 0
     */
    defaultIndex?: number;
    /**
     * Callback when the active tab changes
     */
    onChange?: (index: number) => void;
    index?: number;
    direction?: "horizontal" | "vertical";
    fullWidth?: boolean;
};
type FilledTabsProps = TabsBaseProps & {
    variant: "filled";
    size?: "small" | "medium" | "large";
};
type TextTabsProps = TabsBaseProps & {
    variant: "text";
    size?: "medium" | "large" | "xlarge" | "2xlarge";
    /**
     * Show underline for the active tab
     * @default true
     */
    underline?: boolean;
};
type TabsProps = FilledTabsProps | TextTabsProps;
type TabListProps = PropsWithChildren & Pick<BaseProps, "sx" | "className">;
type TabBaseProps = {
    _index?: number;
    _onClick?: () => void;
    text?: string;
    icon?: ReactNode;
    status?: "success" | "warning";
    disabled?: boolean;
};
type TabProps = TabBaseProps & ({
    badge?: number | string;
} | {
    dot?: boolean;
});
type TabPanelsProps = PropsWithChildren;
type TabPanelProps<Element extends ElementType> = BaseProps<Element> & PropsWithChildren & {
    preRender?: boolean;
    _index?: number;
};

export { FilledTabsProps, TabListProps, TabPanelProps, TabPanelsProps, TabProps, TabsProps, TextTabsProps };