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

export const TitleText = styled(TextNative).attrs({ bold: true })<any>`
   font-size: ${RFValue(14)}px;
   color: #535353;
   padding-bottom: 5px;
`;

export const ButtonsGroupStyle = styled.View<any>`
   flex-direction: row;
   width: auto;
`;

export const ButtonComponent = styled(Pressable)<any>`
   background: #eee;
   padding: 10px;
   overflow: hidden;
   ${(props) => props.active && `background: ${props.theme.primary || '#36A3F7'};`}
`;

export const ButtonText = styled(TextNative)<any>`
   text-align: center;
   color: #222;
   font-size: ${RFValue(14)}px;

   ${(props) => props.active && `color: white;`}
`;

export const TextError = styled(TextNative).attrs({ bold: true })<any>`
   color: ${(props) => props.theme.red || 'crimson'};
   font-size: ${RFValue(14)}px;
   padding-top: 5px;
`;
