export default function StyledButton(props: any) {
    if(props.type == "highlight") {
        return (
            <div>
                <style jsx>{`
                    a {
                        justify-content: center;
                        text-align: center;
                        font-family: "Red Hat Display";
                        display: inline-flex;
                        align-items: center;
                        padding: 0.4em 1em;
                        font-family: "Red Hat Display";
                        font-weight: 500;
                        font-size: 1.1em;
                        border-radius: 8px;
                        background-color: var(--theme-color);
                        transition-duration: 0.2s;
                        gap: var(--padding-sm);
                        color: white;
                        text-decoration: unset;
                    }
                    a:hover {
                        background-color: var(--theme-color-500);
                        text-decoration: none;
                        transition-duration: 0.2s;
                    }
                `}</style>
                <a style={props.style} href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
            </div>
        )
    } else {
        return (
            <div>
                <style jsx>{`
                    a {
                        justify-content: center;
                        text-align: center;
                        font-family: "Red Hat Display";
                        display: inline-flex;
                        align-items: center;
                        padding: 0.4em 1em;
                        font-family: "Red Hat Display";
                        font-weight: 500;
                        font-size: 1.1em;
                        border-radius: 8px;
                        background-color: var(--background-color-dark);
                        transition-duration: 0.2s;
                        gap: var(--padding-sm);
                        color: unset;
                        text-decoration: unset;
                    }
                    a:hover {
                        background-color: var(--theme-color-500);
                        text-decoration: none;
                        transition-duration: 0.2s;
                    }
                `}</style>
                <a style={props.style} href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
            </div>
        )
    }
}