import { Animated } from 'react-native';
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';
import {themeDefault} from "../../../AppProvider/ITheme";

export const Container = styled(Animated.View)`
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 101;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   flex: 1;
   background: #f5f5f5;
`;

export const HeaderFilters = styled.View`
   flex-direction: row;
   align-items: center;
   padding: ${RSValue(5)}px ${RSValue(20)}px;
`;

export const FilterTitle = styled(TextNative).attrs({
   bold: true,
})`
   color: #000;
   font-size: ${RFValue(24)}px;
   flex: 1;
`;

export const ClearBtn = styled(TextNative).attrs({
   bold: true,
})`
   color: ${(props) => props.theme.primary || themeDefault.primary};
   font-size: ${RFValue(15)}px;
`;

export const BackBtn = styled(Pressable)`
   padding: ${RSValue(15)}px ${RSValue(20)}px;
`;

export const FilterBtn = styled.View<any>`
   padding: ${RSValue(12)}px ${RSValue(20)}px;
`;

export const TextFilterBtn = styled(TextNative).attrs({
   color: 'white',
   bold: true,
})`
   font-size: ${RSValue(15)}px;
   align-self: center;
`;
