import React, { useEffect } from 'react';

// Ornate, gem-cornered in-game dialog. Every "detail view" in amerc opens in
// one of these — shared by the tavern, the roster, the legion and the mansion.
export function GameDialog({ title, tag, onClose, children, wide }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);
  return (
    <div className="gd-backdrop" onClick={onClose}>
      <div className={`gd${wide ? ' gd-wide' : ''}`} onClick={(e) => e.stopPropagation()} role="dialog" aria-label={title}>
        <span className="gd-gem tl" aria-hidden="true" /><span className="gd-gem tr" aria-hidden="true" />
        <span className="gd-gem bl" aria-hidden="true" /><span className="gd-gem br" aria-hidden="true" />
        <header className="gd-head">
          {tag && <span className="gd-tag">{tag}</span>}
          <h3>{title}</h3>
          <button className="gd-x" onClick={onClose} type="button" aria-label="Close">✕</button>
        </header>
        <div className="gd-body">{children}</div>
      </div>
    </div>
  );
}

export default GameDialog;
