import { cn } from '@/lib/utils'

interface WatermarkProps {
    text: string
    size?: 'md' | 'lg'
    className?: string
}

export const Watermark = ({ text, size = 'md', className }: WatermarkProps) => {
    // We replicate the "duplicated text" effect using pseudo-elements in CSS, 
    // or simply render multiple spans for simplicity in Tailwind.
    // The reference uses ::before and ::after for duplicates.
    // Let's use a distinct visual approach that looks similar.

    return (
        <div
            className={cn(
                "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-12",
                "pointer-events-none select-none z-0",
                "font-black tracking-widest uppercase opacity-[0.03] text-foreground",
                "flex flex-col items-center justify-center leading-[0.85]",
                size === 'lg' ? "text-[8rem] md:text-[12rem]" : "text-[4rem] md:text-[6rem]",
                className
            )}
            aria-hidden="true"
        >
            <span className="translate-x-4">{text}</span>
            <span>{text}</span>
            <span className="-translate-x-4">{text}</span>
        </div>
    )
}
