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

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

export const InputContainer = styled.View`
  display: flex;
  flex-direction: row;
  width: 100%;
`;

export const InputPassword = styled.TextInput`
  ${({ styles }) => styles};
  paddingVertical: 12px;
  padding-left: 15px;
  padding-right: 45px ;
  width: 100%;
  height: 48px;
  border-radius: 8px;
  border: 1px solid;
  border-color:${({ disabled, hasError }: IStylesProps) =>
    hasError
      ? theme.secondary400
      : disabled === true
      ? theme.neutral300
      : theme.neutral400};
  backgroundColor: ${({ disabled }: IStylesProps) =>
    disabled ? theme.neutral300 : theme.neutral100};
  
  &:focus{
    border-color: ${theme.neutral700};
  }
  &::placeholder{
    color: ${theme.neutral500};
    font-weight: 400;
  }
`;

export const ShowPassword = styled.TouchableOpacity`
  position: absolute;
  right: 0;
  background-color: transparent;
  margin-right: 15px;
  margin-top: 10px;
`;
