import type { ReactNode } from 'react'
import './EmailPreviewLayout.css'

const DEFAULT_SITE = 'https://alrahmaisgl.org'
const LOGO_SRC = `${DEFAULT_SITE}/assets/images/alrahma_logo.png`

export function EmailPreviewLayout({
  children,
}: {
  /** Reserved for future Helmet / window title parity with CI `$subject` */
  subject?: string
  children: ReactNode
}) {
  return (
    <div className="email-preview-root">
      <div className="email-preview-container">
        <div className="email-preview-nopicture">
          <img
            src={LOGO_SRC}
            alt=""
            className="email-preview-logo"
            width={150}
            height={110}
            decoding="async"
          />
        </div>
        <div className="email-preview-body">{children}</div>
        <div className="email-preview-footer">
          <p>
            Visit us:{' '}
            <a href={DEFAULT_SITE} target="_blank" rel="noreferrer noopener">
              {DEFAULT_SITE}
            </a>
          </p>
          <p>
            Contact:{' '}
            <a href="mailto:alrahma.isgl@gmail.com">alrahma.isgl@gmail.com</a>
          </p>
          <p>Address: 5 Courthouse Lane, Chelmsford, MA 01824</p>
        </div>
      </div>
    </div>
  )
}
