import React, { type PropsWithChildren } from "react";
import { twMerge } from "tailwind-merge";
import {
    ButtonClasses,
    type TWUIButtonColorType,
    type TWUIButtonVariantType,
} from "../layout/Button";

export type TWUI_TOGGLE_PROPS = PropsWithChildren &
    React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    > & {
        color?: TWUIButtonColorType;
        variant?: TWUIButtonVariantType;
        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 finalClassName =
        ButtonClasses[variant || "normal"]?.[color || "primary"] ?? "";

    const mainComponent = (
        <div
            {...props}
            className={twMerge(
                "text-xs px-2 py-0.5 rounded-full outline-0",
                "text-center flex items-center justify-center",
                finalClassName,
                "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;
}