import {
    type ColorValue,
    Platform,
    PlatformColor,
    type StyleProp,
    StyleSheet,
    View,
    type ViewStyle,
} from "react-native"

const DEFAULT_DRAG_HANDLE_COLOR = Platform.select<ColorValue>({
    ios: Platform.OS === "web" ? "#EDEEEF" : PlatformColor("tertiaryLabel", "#EDEEEF"),
    default: "#EDEEEF",
})

const styles = StyleSheet.create({
    container: {
        paddingTop: 8,
        width: "100%",
    },
    dragHandle: {
        alignSelf: "center",
        backgroundColor: DEFAULT_DRAG_HANDLE_COLOR,
        borderRadius: 2,
        height: 4,
        width: 40,
    },
})

export interface BottomSheetToolboxDefaultHandleProps {
    style?: StyleProp<ViewStyle>
    children?: React.ReactNode
}

export function BottomSheetToolboxDefaultHandle({
    style,
    children,
}: BottomSheetToolboxDefaultHandleProps) {
    return (
        <View style={[styles.container, style]}>
            <View style={styles.dragHandle} />
            {children}
        </View>
    )
}