Untitled

import { useCallback, useRef } from 'react';
import {
  Box,
  Container,
  ProgressiveImage,
  Screen,
  VStack,
  Text,
  Button,
  BottomSheet,
} from '@components-new/index';
import { s } from '@lib/react-native-size-matters';
import ReservedHandleModal from '@screens/handle-intro-screen/components/reserved-handle-modal';

import { NavigationProp } from '@react-navigation/native';
import Routes from '@navigation/routes';

type HandleIntroScreenProps = {
  navigation: NavigationProp<unknown>;
};
const HandleIntroScreen = ({ navigation }: HandleIntroScreenProps) => {
  const bottomSheetRef = useRef<{ show: () => void; hide: () => void } | null>(null);

  const onFindHandlePress = useCallback(() => {
    navigation.navigate(Routes.FindHandle);
  }, [navigation]);

  const onHasReservedPress = useCallback(() => {
    bottomSheetRef?.current?.show?.();
  }, []);

  const onModalClosePress = useCallback(() => {
    bottomSheetRef?.current?.hide?.();
  }, []);

  return (
    <>
      <Screen
        backgroundColor="white"
        barStyle="dark-content"
        header={{
          leftIcon: {
            name: 'chevron-back-outline',
            type: 'ionicon',
            size: s(24),
          },
          onLeftPress: () => navigation.goBack(),
        }}
      >
        <ProgressiveImage source={require('@assets-new/images/handle_intro.png')} height={230} />
        <Container>
          <VStack justifyContent="space-between" flex={1} mt="vs-6" mb="vs-4">
            <Box>
              <Text tx="your_calling_card" variant="semiBoldL" textAlign="center" />
              <Text
                tx="intro_subtitle"
                variant="regularS"
                color="darkGrey"
                mt="vs-4"
                textAlign="center"
              />
            </Box>

            <Box>
              <Button labelTx="create_your_handle" onPress={onFindHandlePress} bg="aubergine" />
              <Button
                variant="clear"
                labelTx="already_reserved_handle"
                labelColor="aubergine"
                title="I've already reserved one"
                onPress={onHasReservedPress}
                mt="vs-3"
              />
            </Box>
          </VStack>
        </Container>
      </Screen>
      <BottomSheet
        ref={bottomSheetRef}
        snapPoints={[0, 275]}
        renderContent={() => (
          <ReservedHandleModal onCloseModal={onModalClosePress} onCreatePress={onFindHandlePress} />
        )}
      />
    </>
  );
};

export default HandleIntroScreen;