import React from 'react';
import { Tabs as TabsPrimitive, TabsProps as TabsPropsPrimitive } from '@modulz/primitives';

export type TabsProps = TabsPropsPrimitive & {
  orientation?: 'horizontal' | 'vertical';
}

type ExtractRefType<TypesThatMayContainReactRef> = TypesThatMayContainReactRef extends {ref?: React.Ref<infer T>} ? T : unknown;
type PrimitiveRefType = ExtractRefType<TabsPropsPrimitive>  

export const Tabs = React.forwardRef<PrimitiveRefType, TabsProps>((props, ref) => {
  return (
    <TabsPrimitive {...props} ref={ref}  styleConfig={{"base":{"tab":{"normal":{"paddingRight":"12px","fontFamily":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"","fontSize":"14px","height":"32px","color":"hsl(0, 0%, 0%)","paddingLeft":"12px","zIndex":"0"},"hover":{"zIndex":"2"},"focus":{"zIndex":"3"},"selected":{"zIndex":"1","backgroundColor":"hsl(240, 10%, 90%)"}},"panel":{"normal":{"backgroundColor":"hsl(240, 10%, 90%)"}}},"variants":{}}}/>
  );
});