import type { ReactNode } from "react";
import styles from "./AuthShell.module.css";

const websiteUrl =
  process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(/\/$/, "") ||
  "http://localhost:3000";

export default function AuthShell({
  titleLine1,
  titleLine2,
  children,
  footerNote,
}: {
  titleLine1: string;
  titleLine2: string;
  children: ReactNode;
  footerNote?: ReactNode;
}) {
  return (
    <div className={styles.page}>
      <div className={styles.card}>
        <div className={styles.visual}>
          <img className={styles.ship} src="/images/auth/ship.png" alt="" />
        </div>

        <div className={styles.content}>
          <div className={styles.contentInner}>
            <div className={styles.brand}>
              <img src="/images/icons/logo.png" alt="" width={69} height={69} />
              <div className={styles.brandText}>
                <span>{titleLine1}</span>
                <strong>{titleLine2}</strong>
              </div>
            </div>

            {children}

            {footerNote ? <div className={styles.note}>{footerNote}</div> : null}

            <hr className={styles.rule} />

            <nav className={styles.links} aria-label="Auth footer">
              <a href={`${websiteUrl}/businesses`}>Categories</a>
              <span>|</span>
              <a href={`${websiteUrl}/#vision`}>Vision</a>
              <span>|</span>
              <a href={`${websiteUrl}/about`}>About us</a>
              <span>|</span>
              <a href={`${websiteUrl}/contact`}>Contact us</a>
            </nav>

            <div className={styles.socials}>
              <a href="https://instagram.com" aria-label="Instagram">
                <img
                  src="/images/icons/instagram.png"
                  alt=""
                  width={20}
                  height={20}
                />
              </a>
              <a href="https://telegram.org" aria-label="Telegram">
                <img
                  src="/images/icons/telegram.png"
                  alt=""
                  width={20}
                  height={20}
                />
              </a>
              <a href="https://facebook.com" aria-label="Facebook">
                <img
                  src="/images/icons/facebook.png"
                  alt=""
                  width={16}
                  height={16}
                />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}