import React from 'react';
import { 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 { RSValue } from '../../RFValue';
import { TextNative } from '../../TextNative';

export const Container = styled.Modal`
   flex: 1;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
`;

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

export const Modal = styled.View`
   background: white;
   width: 90%;
   align-self: center;
   border-radius: 10px;
   padding: ${RSValue(20)}px ${RSValue(25)}px;
`;

export const FontAwesomeIconItem = styled(FontAwesomeIcon).attrs({
   size: RFValue(37),
})`
   margin-bottom: ${RSValue(20)}px;
   align-self: center;
`;

export const ModalContainer = styled(Animated.View)`
   flex: 1;
   z-index: 2;
   justify-content: center;
`;

export const TitleText = styled(TextNative).attrs({})`
   color: ${(props) => props.color};
   font-size: ${RFValue(18)}px;
   padding-bottom: ${RSValue(10)}px;
   text-align: center;
`;

export const TextContent = styled(TextNative)`
   font-size: ${RFValue(15)}px;
   color: #555;
   text-align: center;
`;

export const BtnContainer = styled.View`
   justify-content: flex-end;
   flex-direction: row;
   width: 100%;
   margin-top: ${RSValue(15)}px;
`;

export const BtnAction = styled(TextNative).attrs({ bold: true })`
   font-size: ${RFValue(16)}px;
   margin-left: ${RSValue(10)}px;
   padding: ${RSValue(10)}px ${RSValue(10)}px;
   text-transform: uppercase;
   color: ${(props) => props.color};
`;
