import React from 'react';
import {Pressable, StyleSheet} from 'react-native';
import rpx from '@/utils/rpx';
import useColors from '@/hooks/useColors';
import {iconSizeConst} from '@/constants/uiConst';
import Icon, {IIconName} from '@/components/base/icon.tsx';

interface IFabProps {
    icon?: IIconName;
    onPress?: () => void;
}
export default function Fab(props: IFabProps) {
    const {icon, onPress} = props;

    const colors = useColors();

    return (
        <Pressable
            onPress={onPress}
            style={[
                styles.container,
                {
                    backgroundColor: colors.backdrop,
                    shadowColor: colors.shadow,
                },
            ]}>
            {icon ? (
                <Icon
                    name={icon}
                    color={colors.text}
                    size={iconSizeConst.normal}
                />
            ) : null}
        </Pressable>
    );
}

const styles = StyleSheet.create({
    container: {
        width: rpx(108),
        height: rpx(108),
        borderRadius: rpx(54),
        position: 'absolute',
        zIndex: 10010,
        right: rpx(36),
        bottom: rpx(72),
        justifyContent: 'center',
        alignItems: 'center',
        shadowOffset: {
            width: 0,
            height: 5,
        },
        shadowOpacity: 0.34,
        shadowRadius: 6.27,

        elevation: 10,
    },
});