import { type ComponentType } from '../../model/ComponentType';
import { ScrollableTabsControl } from '../../ui-kit/TabsControl/ScrollableTabsControl';
import { type TabItemBase } from '../../ui-kit/TabsControl/TabItem';
import { type TabsControlProps, type TabsType } from '../../ui-kit/TabsControl/TabsControlProps';
import { style } from '../../utils/style';

interface RenderTabsProps extends ComponentType {
  items: TabItemBase[];
  activeItem: TabItemBase;
  onChange: TabsControlProps['onChange'];
  tabsType?: TabsType;
}

const tabsStyle: Record<TabsType, { wrapper: string; component: string }> = {
  default: {
    wrapper: '',
    component: '',
  },
  animated: {
    wrapper: 'border-b-8 border-primary-main bg-white',
    component: 'm-auto',
  },
  underlined: {
    wrapper: 'flex',
    component: 'm-auto',
  },
};

export const renderTabsLayout = ({
  className = '',
  tabsType = 'animated',
  ...props
}: RenderTabsProps) =>
  tabsType ? (
    <div className={style(tabsStyle[tabsType].wrapper, className)}>
      <ScrollableTabsControl
        className={tabsStyle[tabsType].component}
        tabsType={tabsType}
        {...props}
      />
    </div>
  ) : null;