import type { FC, ReactNode } from 'react';
import type { BoxProps } from '../Box';

import Box from '../Box';

const TextInputInnerBox: FC<
  {
    position?: 'left' | 'right';
    children: ReactNode;
    withBackground?: boolean;
  } & BoxProps
> = ({ position = 'left', children, withBackground = true, ...boxProps }) => (
  <Box
    padding="0 0.65em"
    fullHeight
    centerContent
    style={{
      [position === 'left' ? 'borderRight' : 'borderLeft']: 'solid 1px #444',
      background: withBackground ? '#222' : undefined,
      color: 'rgba(255,255,255,0.6)',
    }}
    {...boxProps}
  >
    {children}
  </Box>
);

export default TextInputInnerBox;