import React from "react";
import { StyleSheet } from "react-native";
import { Button, View, Text } from "react-native-ui-lib";
import * as Device from "expo-device";
import { DeviceType } from "expo-device";

interface IDrawerButtonProps {
  bgColor: string;
  color: string;
  pressFunc: () => void;
  icon: React.ReactNode;
  title: string;
}

const DrawerButton = (props: IDrawerButtonProps) => {
  const isTablet: boolean = Device.deviceType === DeviceType.TABLET;

  const styles = StyleSheet.create({
    iconContainer: {
      width: isTablet ? '50%' : "70%",
      aspectRatio: 1,
      borderRadius: 100,
    },
    labelStyle: { fontSize: 15, fontFamily: "Poppins_400Regular" },
  });

  return (
    <Button
      onPress={props.pressFunc}
      label={props.title}
      labelStyle={styles.labelStyle}
      color={props.color}
      backgroundColor="white"
      iconSource={() => (
        <View
          backgroundColor={props.bgColor}
          style={styles.iconContainer}
          centerV
          centerH
        >
          {props.icon}
        </View>
      )}
      style={{
        aspectRatio: isTablet ? 1.2 : 1,
        borderRadius: 18.55,
        marginBottom: 12,
        flexDirection: "column",
        justifyContent: "space-between",
        paddingVertical: 15,
      }}
    ></Button>
  );
};
export default DrawerButton;