import React from "react";
import classNames from "classnames";
import { Link } from "react-router"

interface Props {
    children: React.ReactNode;
    className?: string;
    href: string;
    icon?: React.ReactNode;
    size?: "small" | "medium" | "large";
    variant?: "primary" | "secondary";
}

const SolidLinkButton = ({ children, className, href, icon, size = "medium", variant }: Props) => {
    const style = classNames(
        "py-2 px-4 text-xl p-2 rounded hover:bg-secondary mb-0 text-center flex",
        {
            'background-red text-white': variant === "primary",
            'background-secondary border-2 border-secondary': variant === "secondary",
        },
        className
    )

    const iconClassNames = classNames("mt-1", {
        "h-4 w-4 mr-1": size === "small",
        "h-5 w-5 mr-1": size === "medium", // Default size
        "h-7 w-7 mr-2": size === "large",
    });

    const iconElement =
        React.isValidElement(icon) &&
        React.cloneElement(icon as React.ReactElement<{ className?: string }>, {
            className: iconClassNames,
        });

    return (
        <Link className={style} to={href}>
            <div className="flex-grow"></div>
            {iconElement}
            {children}
            <div className="flex-grow"></div>
        </Link>
    )
}

export default SolidLinkButton