import React from "react"
import { Link } from "@onegeo/gatsby-theme-onegeo"
import cx from "classix"

interface Props {
    children?: React.ReactNode
    name?: string
    url?: string
    className?: string
    style?: "outline" | undefined
    color?: "primary" | "secondary" | undefined
}

const Button = (props: Props) => {
    const { children, name = "", url = "#", className, style, color } = props

    const isPrimary = color === "primary"
    const isSecondary = color === "secondary"
    const isOutline = style === "outline"

    return (
        <Link
            to={url}
            className={cx(
                "btn font-bold",
                isPrimary && "btn-primary",
                isSecondary && "btn-secondary",
                isOutline && "btn-outline",
                className
            )}
        >
            {name}
            {children}
        </Link>
    )
}

export default Button