import { createElement, forwardRef, HTMLAttributes, RefForwardingComponent, useContext } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Context from './context';

export interface SubHeaderProps extends HTMLAttributes<HTMLElement> {
}

const SubHeader: RefForwardingComponent<any, SubHeaderProps> = (props, ref) => {
  const { children, style, ...others } = props;
  const { styles } = useContext(Context);
  return (
    <View {...others} ref={ref} style={{ ...styles.subHeader, ...style }}>
      <Text style={{
        color: styles.subHeader.color,
        fontSize: styles.subHeader.fontSize,
        lineHeight: styles.subHeader.lineHeight,
      }}>
        {children as string}
      </Text>
    </View>
  );
};

export default forwardRef<any, SubHeaderProps>(SubHeader);