import React, {memo} from 'react';
import {StyleSheet, View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {useTheme} from '@shared/theme';

const SafeAreaBottomComponent = () => {
  const {bottom} = useSafeAreaInsets();
  const {theme} = useTheme();

  return (
    <View
      style={[
        styles.view,
        {backgroundColor: theme.background.layout.tertiary, height: bottom},
      ]}
    />
  );
};

const styles = StyleSheet.create({
  view: {width: '100%'},
});

export const SafeAreaBottom = memo(SafeAreaBottomComponent);
