import React from 'react';
import { RFValue } from 'react-native-responsive-fontsize';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import styled from 'styled-components/native';
import { themeDefault } from '../../AppProvider/ITheme';
import { Pressable } from '../../Pressable';
import { RSValue } from '../../RFValue';
import { TextNative } from '../../TextNative';

export const Container = styled.View<any>`
   background: ${(props) => props.theme.primary || themeDefault.primary};
   background: black;
   height: ${RSValue(60)}px;
   z-index: 101;
   width: 100%;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   border-top-right-radius: 0px;
   border-top-left-radius: 0px;
   padding-right: ${RSValue(10)}px;
`;

export const BackContainer = styled.View`
   padding: 0px ${RSValue(15)}px;
`;

export const CountSelected = styled.View``;

export const ActionsBtn = styled.View`
   flex: 1;
   flex-direction: row;
   justify-content: flex-end;
   align-items: center;
   height: 100%;
`;

export const IconTouchable = styled(Pressable)`
   padding: 0px ${RSValue(15)}px;
   justify-content: center;
   align-self: center;
   align-items: center;
   height: 100%;
`;

export const Icon = styled(FontAwesomeIcon).attrs({
   color: 'white',
   size: RFValue(18),
})`
   height: 100%;
`;

export const CountSelectedText = styled(TextNative)`
   color: white;
   font-size: ${RFValue(20)}px;
`;
