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";
    };

/**
 * # Tabs Component
 * @className twui-tag
 */
export default function Tag({
    color,
    variant,
    children,
    ...props
}: TWUI_TOGGLE_PROPS) {
    return (
        <div
            {...props}
            className={twMerge(
                "text-xs px-2 py-0.5 rounded-full outline outline-0",
                color == "secondary"
                    ? "bg-violet-600 outline-violet-600"
                    : color == "success"
                    ? "bg-emerald-700 outline-emerald-700"
                    : color == "error"
                    ? "bg-orange-700 outline-orange-700"
                    : color == "gray"
                    ? "bg-slate-100 outline-slate-200 dark:bg-white/10 dark:outline-white/20 text-slate-500 dark:text-white"
                    : "bg-blue-600 outline-blue-600",
                variant == "outlined"
                    ? "!bg-transparent outline-1 " +
                          (color == "secondary"
                              ? "text-violet-600"
                              : color == "success"
                              ? "text-emerald-700 dark:text-emerald-400"
                              : color == "error"
                              ? "text-orange-700"
                              : color == "gray"
                              ? "text-slate-700 dark:text-white/80"
                              : "text-blue-600")
                    : variant == "ghost"
                    ? "!bg-transparent outline-none border-none " +
                      (color == "secondary"
                          ? "text-violet-600"
                          : color == "success"
                          ? "text-emerald-700 dark:text-emerald-400"
                          : color == "error"
                          ? "text-orange-700"
                          : color == "gray"
                          ? "text-slate-700 dark:text-white/80"
                          : "text-blue-600")
                    : "",

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