import React from 'react';
import {View} from 'react-native';
import {Typography} from '@components/_core/Typography';

import {InputCoreProps} from '../../interfaces';
import {useInputColors} from '../../hooks/useInputColors';
import {styles} from './styles';
import {InputHelper} from '../InputHelper';

export function InputCore(props: InputCoreProps) {
  const {label, children, disabled, focused, isError, isSuccess, style} = props;
  const {labelColor} = useInputColors({
    isError,
    isSuccess,
    disabled,
    focused,
  });

  return (
    <View style={[styles.container, style]}>
      {!!label && (
        <Typography variant="s" weight="semiBold" color={labelColor}>
          {label}
        </Typography>
      )}
      {children}
      <InputHelper {...props} />
    </View>
  );
}
