import { Dimensions, Animated } from 'react-native';
import { RFValue } from 'react-native-responsive-fontsize';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import styled from 'styled-components/native';
import { Pressable } from '../Pressable';
import { RSValue } from '../RFValue';
import { TextNative } from '../TextNative';

export const Container = styled(Animated.View)`
   position: absolute;
   width: 100%;
   height: 100%;
   background: white;
   z-index: 100;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
`;

export const InputContainer = styled.View`
   padding-left: 0px;
   border-bottom-color: #ddd;
   border-bottom-width: 2px;
   flex-direction: row;
   align-items: center;
   background: black;
`;

export const Input = styled.TextInput.attrs({
   placeholderTextColor: '#888',
})`
   font-size: ${RSValue(19)}px;
   padding: ${RSValue(20)}px ${RSValue(10)}px;
   color: white;
`;

export const BtnBack = styled(Pressable)<any>`
   justify-content: center;
   padding: 0px ${RSValue(5)}px;
`;

export const IconSearch = styled(FontAwesomeIcon).attrs({
   size: RSValue(17.5),
})`
   margin: 0px ${RSValue(15)}px;
`;

export const ErrorContainer = styled.View`
   flex: 1;
   padding: 20px;
   align-items: center;
   justify-content: center;
`;

export const ErrorContainerText = styled(TextNative).attrs({
   alignCenter: true,
})`
   font-size: ${RSValue(17.5)}px;
   color: #666;
`;

export const ResultsContainer = styled.ScrollView`
   flex: 1;
`;

export const BtnCheck = styled(Pressable)<any>`
   position: absolute;
   width: ${RSValue(65)}px;
   height: ${RSValue(65)}px;
   background: ${(props) => props.theme.primary || '#36A3F7'};
   bottom: ${RSValue(10)}px;
   right: ${RSValue(10)}px;
   border-radius: ${RSValue(55)}px;
   z-index: 100;
   elevation: 5;
   align-items: center;
   align-content: center;
   justify-content: center;
`;
