import React from 'react';
import {StyleSheet} from 'react-native';
import {BottomSheetHandle, BottomSheetHandleProps} from '@gorhom/bottom-sheet';
import {COLORS} from '@shared/colors';

export type HandleProps = BottomSheetHandleProps;

export function Handle(props: HandleProps) {
  return <BottomSheetHandle {...props} indicatorStyle={styles.indicator} />;
}

const styles = StyleSheet.create({
  indicator: {
    borderRadius: 20,
    height: 4,
    width: 72,
    backgroundColor: COLORS.GRAY_THIRTY_THREE,
    opacity: 0.4,
    top: -16,
  },
});
