"use client";

import styles from "./external-browser-dialog.module.css";

export interface ExternalBrowserDialogProps {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void;
}

export function ExternalBrowserDialog({
  open,
  onClose,
  onConfirm,
}: ExternalBrowserDialogProps) {
  if (!open) return null;

  return (
    <div
      className={styles.overlay}
      role="dialog"
      aria-modal="true"
      aria-labelledby="external-browser-title"
    >
      <div className={styles.dialog}>
        <h2 id="external-browser-title" className={styles.title}>
          Open in browser
        </h2>
        <p className={styles.content}>
          Sync your Facebook profile to an external browser for the best chat experience.
        </p>
        <div className={styles.actions}>
          <button
            type="button"
            className={`${styles.button} ${styles.secondary}`}
            onClick={onClose}
          >
            Later
          </button>
          <button
            type="button"
            className={`${styles.button} ${styles.primary}`}
            onClick={onConfirm}
          >
            Continue
          </button>
        </div>
      </div>
    </div>
  );
}