import {Link, type LinkProps} from "react-router-dom"
import {defaultIconSize} from "./SvgIcon"
import {type BasicButtonProps, basicButtonStyle, ButtonType} from "./BasicButtonDefinitions"
import clsx from "clsx";

type ButtonLinkProps = LinkProps & BasicButtonProps
    & {
    to: string
}

/**
 * Link component having the same stile as the button
 */
export default function ButtonLink({
                                       to,
                                       text,
                                       icon: Icon,
                                       buttonType = ButtonType.DefaultButton,
                                       className = "",
                                       ...props
                                   }: ButtonLinkProps) {
    return (
        <Link
            to={to}
            className={clsx(
                basicButtonStyle,
                buttonType.backgroundColor,
                buttonType.textColor,
                className
            )}
            {...props}
        >
            <div className="flex items-center gap-2">
                {Icon && (
                    <Icon
                        size={defaultIconSize}
                    />
                )}
                {text}
            </div>
        </Link>
    )
}
