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

type Props = PropsWithChildren &
    DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

/**
 * # Single Line CodeBlock
 */
export default function SingleLineCodeBlock({ children, ...props }: Props) {
    return (
        <div
            {...props}
            className={twMerge(
                "[&_.twui-code-block-header]:absolute [&_.twui-code-block-header]:!bg-transparent",
                "[&_.twui-code-block-header]:mt-2 [&_.twui-code-block-header]:pr-3 [&_.twui-divider]:hidden",
                "[&_pre]:!pr-14 [&_.twui-code-block-copied-text]:!hidden",
                props.className
            )}
        >
            {children}
        </div>
    );
}