SelectionButton.js

// Third-party imports
import React from "react"

// Global imports
import { Tooltip } from "@/components/generic"

// Local imports
import { StyledButton } from "./styles"

////////////////////////////////////////////////////////////////////////////////

/**
 * @function SelectionButton
 * @description A button used when the user should select among different possible filters.
 * @param {boolean} [disabled=False] - Determines if the button is clickable or not. Also disables the tooltip if true.
 */
const SelectionButton = ({ disabled, ...props }) => {
    const styledButtonProps = {
        disabled,
        ...props,
    }
    
    return disabled ? (
        <Tooltip label="Out of stock">
            <StyledButton {...styledButtonProps} />
        </Tooltip>
    ) : (
        <StyledButton {...styledButtonProps} />
    )
}

export default SelectionButton