import React from 'react';
import styles from './ObscuredOverlay/ObscuredOverlay.module.css';

type ObscuredOverlayProps = {
  obscured: boolean;
  overlayMessage?: React.ReactNode;
  buttonText?: string;
  onButtonClick?: () => void;
  children: React.ReactNode;
  // Optional border radius for the overlay container. If undefined, no radius is applied.
  borderRadius?: string | number;
};

export default function ObscuredOverlay({
  obscured,
  overlayMessage,
  buttonText,
  onButtonClick,
  children,
  borderRadius,
}: ObscuredOverlayProps) {
  return (
    <div className={styles.container}>
      {children}
      {obscured && (
        <div
          className={styles.overlay}
          style={{
            ...(borderRadius !== undefined ? { borderRadius } : {}),
          }}
        >
          <div className={styles.overlayContent}>
            {overlayMessage && (
              <div className={styles.overlayMessage}>
                {overlayMessage}
              </div>
            )}
            {buttonText && onButtonClick && (
              <button type="button" onClick={onButtonClick} className={styles.overlayButton}>
                {buttonText}
              </button>
            )}
          </div>
        </div>
      )}
    </div>
  );
}