import { RFValue } from 'react-native-responsive-fontsize';
import styled from 'styled-components/native';
import { Pressable } from '../../Pressable';
import { RSValue } from '../../RFValue';
import { TextNative } from '../../TextNative';

export const ContainerScroll = styled.ScrollView.attrs({})``;

export const Container = styled.View`
   flex: 1;
   align-self: center;
   justify-content: center;
   align-content: center;
   margin: 10px 25px;
`;

export const Image = styled.Image`
   align-self: center;
   resize-mode: contain;
`;

export const TextTitle = styled(TextNative).attrs({
   extraBold: true,
})`
   align-self: center;
   font-size: ${RFValue(22)}px;
   margin-top: 0px;
`;

export const TextP = styled(TextNative)`
   font-size: ${RFValue(16)}px;
   align-self: center;
   text-align: center;
   margin-top: ${RSValue(10)}px;
   margin-bottom: ${RSValue(25)}px;
`;

export const TextPBold = styled(TextP).attrs({ bold: true })``;

export const RetryBtn = styled(Pressable)`
   margin-top: ${RSValue(20)}px;
   align-self: center;
   padding: ${RSValue(9)}px ${RSValue(30)}px;
   background: black;
   border-radius: ${RSValue(10)}px;
`;

export const RetryTextBtn = styled(TextNative).attrs({
   bold: true,
})`
   color: white;
   font-size: ${RFValue(14.5)}px;
   text-transform: uppercase;
`;
