'use client';

import { ReactNode, CSSProperties } from 'react';

interface ProtectedImageProps {
  src: string;
  alt: string;
  className?: string;
  style?: CSSProperties;
  width?: number;
  height?: number;
  showWatermark?: boolean;
  priority?: boolean;
  children?: ReactNode;
}

/**
 * Protected Image Component
 * Wraps images with protection against downloading and copying
 */
export default function ProtectedImage({
  src,
  alt,
  className = '',
  style = {},
  width,
  height,
  showWatermark = false,
  children
}: ProtectedImageProps) {
  const wrapperClass = `protected-image-wrapper ${showWatermark ? 'watermarked-image' : ''} ${className}`;

  return (
    <div className={wrapperClass} style={style}>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={src}
        alt={alt}
        width={width}
        height={height}
        draggable="false"
        onContextMenu={(e) => e.preventDefault()}
        onDragStart={(e) => e.preventDefault()}
        style={{
          WebkitUserSelect: 'none',
          MozUserSelect: 'none',
          msUserSelect: 'none',
          userSelect: 'none',
          pointerEvents: 'none'
        }}
      />
      {children}
    </div>
  );
}