import {FC} from "react";
import {StyleSheet, View, Image, TouchableOpacity, GestureResponderEvent} from "react-native";
import DText from "../DText/DText";
import {RFPercentage} from "react-native-responsive-fontsize";
import {responsiveWidth} from "react-native-responsive-dimensions";

type Props = {
    onPress?: (event: GestureResponderEvent) => void

};
const SortingButton: FC<Props> = ({onPress}) => {
    return (
        <TouchableOpacity onPress={onPress}>
            <View style={styles.container}>

                <View style={styles.imageWrapper}>
                    <Image style={styles.image} source={require('assets/icons/filter.png')}/>
                </View>
                <DText>Фильтр</DText>
            </View>
        </TouchableOpacity>

    )
}

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        columnGap: responsiveWidth(1),
    },
    imageWrapper: {
        width: RFPercentage(3),
        height: RFPercentage(3)
    },
    image: {
        resizeMode: 'contain',
        width: '100%',
        height: '100%'
    }
});
export default SortingButton;