import { useState } from 'react';
import { Button, Modal, Platform, Text } from 'react-native';
import {
  SafeAreaProvider, SafeAreaView,
} from 'react-native-safe-area-context';

export function FiltersModal() {
  const [visible, setVisible] = useState(false);
  const close = () => setVisible(false);

  return (
    <>
      <Button title="Open filters" onPress={() => setVisible(true)} />
      <Modal
        visible={visible}
        onRequestClose={close}
        presentationStyle={Platform.OS === 'ios' ? 'pageSheet' : 'fullScreen'}
        allowSwipeDismissal={Platform.OS === 'ios'}
      >
        <SafeAreaProvider>
          <SafeAreaView style={{ flex: 1, padding: 24, gap: 16 }}>
            <Text>Filters</Text>
            <Button title="Close filters" onPress={close} />
          </SafeAreaView>
        </SafeAreaProvider>
      </Modal>
    </>
  );
}