import type { ReactNode } from 'react'
import { getBusinessDashboardHostForApp, isAllowedBusinessHost } from '../lib/config'
import styles from './BusinessDomainGuard.module.css'

export function BusinessDomainGuard({ children }: { children: ReactNode }) {
  if (isAllowedBusinessHost()) {
    return children
  }

  const expectedHost = getBusinessDashboardHostForApp()

  return (
    <div className={styles.page}>
      <div className={styles.card}>
        <h1 className={styles.title}>Wrong domain</h1>
        <p className={styles.text}>
          This business dashboard is only available at{' '}
          <strong>{expectedHost}</strong>.
        </p>
        <p className={styles.hint}>
          Add <code>127.0.0.1 {expectedHost}</code> to your hosts file, then open{' '}
          <code>
            http://{expectedHost}
            {window.location.port ? `:${window.location.port}` : ''}
          </code>
          .
        </p>
      </div>
    </div>
  )
}
