"use client";

import React from "react";
import Link from "next/link";

type ButtonVariant = "primary" | "secondary" | "text" | "danger" | "border-primary";
type IconPosition = "left" | "right";
type RenderAs = "button" | "link";
type LinkVariant = "text" | "button";

interface ButtonProps {
    children: React.ReactNode;
    variant?: ButtonVariant;
    icon?: React.ReactNode;
    iconPosition?: IconPosition;
    isLoading?: boolean;
    className?: string;
    [x: string]: any;

    as?: RenderAs;
    href?: string;
    linkVariant?: LinkVariant;

    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
    type?: "button" | "submit" | "reset";
    disabled?: boolean;
}

const Button = ({
    children,
    variant = "primary",
    icon,
    iconPosition = "left",
    isLoading = false,
    disabled,
    className = "",
    as = "button",
    href,
    linkVariant = "button",
    type = "button",
    onClick,
    ...rest
}: ButtonProps) => {
    const base =
        "flex items-center justify-center gap-2 px-3 md:px-5 py-3 md:py-4 rounded-xl md:rounded-2xl text-sm md:text-base font-normal cursor-pointer transition-all duration-300";

    const buttonBase = `${base} border w-full`;

    const primary = "bg-primary border-grey2b text-white hover:bg-primary-c5";

    const borderPrimary = "bg-transparent border-primary text-primary hover:text-white hover:bg-primary";

    const secondary =
        "bg-grey36 border-grey32 text-light text-grey92 hover:bg-primary";
    const textButton =
        "bg-transparent border-0 text-light hover:text-primary px-0 py-0 rounded-none";
    const disabledStyles =
        variant === "text"
            ? "opacity-50 cursor-not-allowed"
            : "opacity-60 cursor-not-allowed";
    ("bg-grey36 border-grey31 text-light hover:bg-secondary27");

    const danger =
        "bg-marun18 border-grey31 text-white hover:bg-red hover:border-red";

    const variantStyles =
        variant === "primary"
            ? primary
            : variant === "secondary"
                ? secondary
                : variant === "danger"
                    ? danger
                    : variant === "border-primary" ? borderPrimary :
                        textButton;

    /* ---------- TEXT LINK STYLE ---------- */
    const textLinkStyles =
        "inline-block text-light hover:text-primary text-sm md:text-base font-normal transition-all duration-300";
    const content = isLoading ? (
        <span className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
    ) : (
        <>
            <span className={`${icon ? "flex items-center" : ""} `}>
                {icon && iconPosition === "left" && icon}
                <span>{children}</span>
                {icon && iconPosition === "right" && icon}
            </span>
        </>
    );

    /* ---------- LINK ---------- */
    if (as === "link" && href) {
        if (linkVariant === "text") {
            return (
                <Link href={href} className={`${textLinkStyles} ${className}`}>
                    {content}
                    {/* {children} */}
                </Link>
            );
        }

        return (
            <Link
                href={href}
                className={`${buttonBase} ${variantStyles} ${className}`}
            >
                {content}
            </Link>
        );
    }

    /* ---------- BUTTON ---------- */
    return (
        <button
            type={type}
            onClick={onClick}
            disabled={disabled || isLoading}
            className={`${buttonBase} ${variantStyles} ${disabled || isLoading ? disabledStyles : ""
                } ${className}`}
            {...rest}
        >
            {content}
        </button>
    );
};

export default Button;