import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";

/**
 * # Span element
 * @className twui-span
 */
export default function Span({
    size,
    variant,
    ...props
}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> & {
    size?: "normal" | "small" | "smaller" | "large" | "larger";
    variant?: "normal" | "faded";
}) {
    return (
        <span
            {...props}
            className={twMerge(
                "text-base",
                size == "small" && "text-sm",
                size == "smaller" && "text-xs",
                size == "large" && "text-lg",
                size == "larger" && "text-xl",
                variant == "faded" && "opacity-50",
                "twui-span",
                props.className
            )}
        >
            {props.children}
        </span>
    );
}