import { Outlet } from 'react-router-dom'
import loginPromo from '../assets/images/login-promo.png'
import logo from '../assets/images/logo.png'
import './AuthLayout.css'

const WEBSITE_URL = import.meta.env.VITE_WEBSITE_URL || 'http://madomotor.com:5174'

export default function AuthLayout() {
  return (
    <div className="auth-page">
      <div className="auth-card">
        <div className="auth-card__logo">
          <a href={WEBSITE_URL}>
            <img src={logo} alt="مادو موتور" />
          </a>
        </div>

        <div className="auth-card__body">
          {/* Form first so RTL places it on the right */}
          <div className="auth-card__form">
            <div className="auth-card__form-inner">
              <Outlet />
            </div>
          </div>
          <div className="auth-card__promo">
            <img src={loginPromo} alt="" className="auth-card__image" />
            <div className="auth-card__copy">
              <h3>
                چقدر برای <span>سلامتی</span> خود ارزش قائل اید؟
              </h3>
              <h2>
                یک عدد <strong>کــــــــــلاه کـــــــــاسکت</strong>
                <br />
                هدیه ی ما برای ســــلامتی شما.
              </h2>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}