import React from "react";
import { StyleSheet } from "react-native";
import { Button, View, Text } from "react-native-ui-lib";

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

const DrawerButton = (props: IDrawerButtonProps) => {
  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: 1,
        borderRadius: 15,
        marginBottom: 12,
        flexDirection: "column",
        justifyContent: "space-between",
        paddingVertical: 15,
      }}
    ></Button>
  );
};
export default DrawerButton;

const styles = StyleSheet.create({
  iconContainer: {
    width: "70%",
    aspectRatio: 1,
    borderRadius: 50,
  },
  labelStyle: { fontSize: 14, fontFamily: "Manrope_600SemiBold" },
});