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

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

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

export const TextTitle = styled(TextNative).attrs({
   bold: true,
})`
   align-self: center;
   font-size: ${RFValue(16)}px;
   margin-top: 20px;
   color: #888;
   text-align: center;
`;

export const TextP = styled(TextNative)`
   font-size: 18px;
   align-self: center;
   text-align: center;
   margin-top: 10px;
   margin-bottom: 20px;
`;

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

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

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