dishplanner/frontend/app/components/ui/Buttons/OutlineButton.tsx

import React from "react";
import classNames from "classnames";

interface Props {
    children: React.ReactNode;
    className?: string;
    disabled?: boolean;
    onClick?: () => void;
    size?: "small" | "medium" | "large";
    type: 'submit' | 'button';
}

const OutlineButton = ({ children, className, disabled = false, onClick, size, type }: Props) => {
    const style = classNames(
        "justify-center border-2 border-accent font-size-18 text-accent-blue py-2 px-4 rounded flex",
        { 'text-xs': size === "small" },
        className
    )

    if (onClick === undefined) {
        onClick = () => {
        }
    }

    return (
        <button
            type={ type }
            className={ style }
            disabled={ disabled }
            onClick={ onClick }
        >
            { children }
        </button>
    )
}

export default OutlineButton