import React from "react"
import { Link } from "@onegeo-suite/gatsby-theme-onegeo"
import { twMerge } from "tailwind-merge"

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

const Button = (props: Props) => {
    const { children, name = "", url = "#", className, style, color } = props
    // TODO: set style, color via options ?
    const options = props.options ?? {}
    const oClass = options.class || {}

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

    return (
        <Link
            to={url}
            className={twMerge(
                "btn font-bold",
                isPrimary && "btn-primary",
                isSecondary && "btn-secondary",
                isOutline && "btn-outline",
                className,
                options.action, // TODO: use className when possible
                oClass.button // TODO: use className when possible
            )}
        >
            {name}
            {children}
        </Link>
    )
}

export default Button