import React from 'react';
import { BoxDivProps, BoxSpace, SilkeBox } from '../silke-box';
import styles from './silke-tabs.scss';

type TabsProps = {
  size?: 's' | 'base';
  children: React.ReactNode;
} & Omit<BoxDivProps, 'size' | 'height' | 'width'>;

export function SilkeTabs({ children, size, className, ...rest }: TabsProps) {
  let gap: BoxSpace = 'm';
  let cl = styles.tabs;
  if (size === 's') {
    cl += ' ' + styles.s;
    gap = 's';
  }
  if (className) cl += ' ' + className;
  return (
    <SilkeBox className={cl} gap={gap} {...rest}>
      {children}
    </SilkeBox>
  );
}