import React, { PropsWithChildren } from "react";
import { twMerge } from "tailwind-merge";

export type TWUITabsObject = {
    title: string;
    value: string;
    content: React.ReactNode;
    defaultActive?: boolean;
};

export type TWUI_TOGGLE_PROPS = PropsWithChildren &
    React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    > & {
        color?: "normal" | "secondary" | "error" | "success" | "gray";
        variant?: "normal" | "outlined" | "ghost";
        href?: string;
        newTab?: boolean;
        linkProps?: React.DetailedHTMLProps<
            React.AnchorHTMLAttributes<HTMLAnchorElement>,
            HTMLAnchorElement
        >;
    };

/**
 * # Tabs Component
 * @className twui-tag
 * @className twui-tag-primary-outlined
 */
export default function Tag({
    color,
    variant,
    children,
    href,
    newTab,
    linkProps,
    ...props
}: TWUI_TOGGLE_PROPS) {
    const mainComponent = (
        <div
            {...props}
            className={twMerge(
                "text-xs px-2 py-0.5 rounded-full outline-0",
                "text-center flex items-center justify-center",
                color == "secondary"
                    ? "bg-secondary text-white outline-secbg-secondary"
                    : color == "success"
                    ? "bg-success outline-success text-white"
                    : color == "error"
                    ? "bg-orange-700 outline-orange-700"
                    : color == "gray"
                    ? twMerge(
                          "bg-slate-100 outline-slate-200 dark:bg-gray-dark dark:outline-gray-dark",
                          "text-slate-800 dark:text-white"
                      )
                    : "bg-primary text-white outline-primbg-primary twui-tag-primary",
                variant == "outlined"
                    ? "!bg-transparent outline-1 " +
                          (color == "secondary"
                              ? "text-secondary"
                              : color == "success"
                              ? "text-success dark:text-success-dark"
                              : color == "error"
                              ? "text-orange-700"
                              : color == "gray"
                              ? "text-slate-700 dark:text-white/80"
                              : "text-primary dark:text-primary-dark twui-tag-primary-outlined")
                    : variant == "ghost"
                    ? "!bg-transparent outline-none border-none " +
                      (color == "secondary"
                          ? "text-secondary"
                          : color == "success"
                          ? "text-success dark:text-success-dark"
                          : color == "error"
                          ? "text-orange-700"
                          : color == "gray"
                          ? "text-slate-700 dark:text-white/80"
                          : "text-primary dark:text-primary-dark")
                    : "",

                "twui-tag",
                props.className
            )}
        >
            {children}
        </div>
    );

    if (href) {
        return (
            <a
                href={href}
                target={newTab ? "_blank" : undefined}
                {...linkProps}
                className={twMerge("hover:opacity-80", linkProps?.className)}
            >
                {mainComponent}
            </a>
        );
    }

    return mainComponent;
}