import React from 'react';
import { BoxProps, SilkeBox } from '../silke-box';
import styles from './silke-text-field.scss';

type SilkeTextFieldItemProps = {
  /** Add the text field before */
  before?: boolean;
} & BoxProps;

function TextFieldItem(
  { before, children, className, ...rest }: SilkeTextFieldItemProps,
  ref: any,
) {
  let cl = before ? styles.itemBefore : styles.itemAfter;
  if (className) cl += ' ' + className;
  return (
    <SilkeBox
      ref={ref}
      className={cl}
      align={rest.hAlign || rest.vAlign ? undefined : 'center'}
      {...rest}
    >
      {children}
    </SilkeBox>
  );
}
export const SilkeTextFieldItem = React.forwardRef(TextFieldItem);
SilkeTextFieldItem.displayName = 'SilkeTextFieldItem';