import React, { type FC, type ReactElement } 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 OutlineLinkButton: FC<Props> = ({ children, className, href, icon, size = "medium", variant }) => {
    const linkClassNames = classNames(
        "underline font-default pt-3 pb-3 px-4 rounded mb-0 flex",
        {
            'text-primary border-primary': variant === "primary",
            'text-secondary border-secondary': variant === "secondary",
            'text-accent-blue border-accent': !variant || !["primary", "secondary"].includes(variant),
        }, {
            'text-size-14': size === "small",
            'font-size-18': !size || size === "medium",
            'text-2xl': size === "large",
        },
        className,
    )

    const iconClassNames = classNames("mt-0.5", {
        "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 ReactElement<{ className?: string }>, {
            className: iconClassNames,
        });

    return (
        <Link className={linkClassNames} to={href}>
            {iconElement}
            {children}
        </Link>
    )
}

export default OutlineLinkButton