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

/**
 * # General paper
 * @className_wrapper twui-paper
 */
export default function Paper({
    variant,
    linkProps,
    componentRef,
    ...props
}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
    variant?: "normal";
    linkProps?: DetailedHTMLProps<
        React.AnchorHTMLAttributes<HTMLAnchorElement>,
        HTMLAnchorElement
    >;
    componentRef?: RefObject<HTMLDivElement | null>;
}) {
    return (
        <div
            {...props}
            ref={componentRef as any}
            className={twMerge(
                "flex flex-col items-start p-4 rounded bg-white dark:bg-white/10 gap-4",
                "border border-slate-200 dark:border-white/10 border-solid w-full",
                "relative",
                "twui-paper",
                props.className
            )}
        >
            {props.children}
        </div>
    );
}