Web-Frontend/client/src/components/layout/Canvas/SettingsButton.jsx

// This component displays a drop down menu when clicked, with custom functionality
// for 'Add Widget', 'Edit Widgets', and 'Remove Widgets'. This component will 
// control settings related to the Widgets on the main canvas. 

import { Button, IconButton, Menu, Portal } from "@chakra-ui/react";
import { FiSettings } from "react-icons/fi";

export function SettingsButton(props) {
    const handleAddWidget = () => {
        console.log("Add Widget clicked");
        // TODO: Implement widget-adding logic
    }

    const handleEditWidgdets = () => {
        console.log("Edit Widgets clicked")
        // TODO: Implement widget-editing logic
    }

    const handleDeleteWidgets = () => {
        console.log("Delete Widgets clicked");
        // TODO: Implement widget-deletion logic
    }
    
    return (
        // This uses Chakra's built in menu component
        <Menu.Root>
            <Menu.Trigger asChild>
                <IconButton variant="ghost" size="md">
                    <FiSettings />
                </IconButton>
            </Menu.Trigger>
            <Portal>
                <Menu.Positioner>
                    <Menu.Content>
                        <Menu.Item onClick={handleAddWidget} value="addwidget">Add Widget</Menu.Item>
                        <Menu.Item onClick={handleEditWidgdets} value ="editwidget">Edit Widgets</Menu.Item>
                        <Menu.Item 
                            onClick={handleDeleteWidgets}
                            color="fg.error"
                            _hover={{ bg: "bg.error", color: "fg.error "}}
                        >
                            Delete Widgets
                        </Menu.Item>
                    </Menu.Content>
                </Menu.Positioner>
            </Portal>
        </Menu.Root>
    );
}