import { Tabs as AntTabs, type TabsProps } from 'antd';
import { Settings } from './settings';

const onChange = (key: string) => {
  console.log(key);
};

const items: TabsProps['items'] = [
  {
    key: '1',
    label: 'Tab 1',
    children: 'Content of Tab Pane 1',
  },
  {
    key: '2',
    label: 'Tab 2',
    children: 'Content of Tab Pane 2',
  },
  {
    key: '3',
    label: 'Tab 3',
    children: 'Content of Tab Pane 3',
  },
];

export interface BaseTabProps extends TabsProps {
  // Add any custom props here
  size?: 'small' | 'middle' | 'large';
  tabPosition?: 'top' | 'bottom' | 'left' | 'right';
}

const Component = (props: BaseTabProps) => {
  console.log(55, props);
  return (
    <AntTabs
      defaultActiveKey="1"
      items={items}
      onChange={onChange}
      type="card"
      {...props}
    />
  );
};

export { Component, Settings };

declare global {
  interface Window {
    BaseTab?: any;
  }
}

export const type = 'tab';
export const defaultProps = {
  size: 'middle',
  tabPosition: 'top',
};