import styled from 'styled-components/native';
import { CSSObject } from 'styled-components';
import { theme } from 'data/dataMx';

interface IStylesProps {
    editable?: boolean;
    disabled?: boolean;
    hasError: boolean;
    focus:boolean;
    styles?: CSSObject;
}

export const InputNumber = styled.TextInput`
  ${({ styles }) => styles};
  padding: 10px 15px;
  border-width: 1px;
  borderColor:${({ editable, disabled, hasError, focus }: IStylesProps) =>
  disabled ? theme.neutral300 : !editable ? theme.transparent : (hasError ? theme.secondary400 : (focus? theme.neutral700 : theme.neutral400))};
  flex: 1;
  width: 100%;
  height: 48px;
  borderRadius: 8px;
  backgroundColor: ${({ disabled }: IStylesProps) => disabled?  theme.neutral300 : theme.neutral100};
  min-height: 48px;

  &:focus{
      border-color: ${theme.neutral700};
  }
  &::placeholder{
      color: ${theme.neutral500};
      font-weight: 400;
  }
`;


