import logo from '../assets/logo.png'
import './Modal.css'
import './AboutModal.css'

interface AboutModalProps {
  onClose: () => void
}

// AGPL-3.0 itself recommends this: "if your software can interact with
// users remotely through a computer network, you should also make sure
// that it provides a way for users to get its source... its interface
// could display a 'Source' link" -- this modal is that link, not just a
// courtesy credits screen.
const SOURCE_URL = 'https://git.darksingularity.org/DarkSingularity/ds-chat'

export function AboutModal({ onClose }: AboutModalProps) {
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal about-modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2>About</h2>
          <button type="button" className="modal-close" onClick={onClose} aria-label="Close">
            &times;
          </button>
        </div>

        <div className="about-modal-brand">
          <img src={logo} alt="" className="about-modal-logo" />
          <div>
            <div className="about-modal-name">DS Chat</div>
            <div className="about-modal-version">Version {__APP_VERSION__}</div>
          </div>
        </div>

        <p className="about-modal-line">
          Licensed under the{' '}
          <a href="/LICENSE" target="_blank" rel="noopener noreferrer">
            GNU Affero General Public License v3.0 (or later)
          </a>
          .
        </p>
        <p className="about-modal-line">
          <a href={SOURCE_URL} target="_blank" rel="noopener noreferrer">
            Source code
          </a>
        </p>

        <div className="modal-actions" style={{ marginTop: '1rem' }}>
          <button type="button" className="btn-secondary" onClick={onClose}>
            Close
          </button>
        </div>
      </div>
    </div>
  )
}