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

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

export const InputEmail = styled.TextInput`
  ${({ styles }) => styles};
  padding: 10px 15px;
  border: 1px solid;
  border-color: ${({ editable, disabled, hasError }: IStylesProps) =>
    hasError
      ? theme.secondary400
      : disabled
      ? theme.neutral300
      : !editable
      ? theme.transparent
      : theme.neutral400};
  backgroundColor: ${({ disabled }: IStylesProps) =>
    disabled ? theme.neutral300 : theme.neutral100};
  width: 100%;
  height: 48px;
  border-radius: 8px;
  
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  &:focus{
    border-color: ${theme.neutral700};
  }
  &::placeholder{
    color: ${theme.neutral500};
    font-weight: 400;
  }
`;
