---
import Base from "../layouts/Base.astro";
import Root from "../components/AppLayout.jsx";
import LyricSearch from '../components/LyricSearch.jsx';

const hostHeader = Astro.request?.headers?.get('host') || '';
const host = hostHeader.split(':')[0];
import { getSubsiteByHost } from '../utils/subsites.js';
import { getSubsiteByPath } from '../utils/subsites.js';
const detected = getSubsiteByHost(host) ?? getSubsiteByPath(Astro.url.pathname) ?? null;
const isReq = detected?.short === 'req' || getSubsiteByPath(Astro.url.pathname)?.short === 'req';

import { WHITELABELS } from "../config";
const whitelabel = WHITELABELS[host] ?? (detected ? WHITELABELS[detected.host] : null);
---

<Base>
  {whitelabel ? (
    <section>
      <div class="prose prose-neutral dark:prose-invert">
        <Root child="ReqForm" client:only="react">
        </Root>
      </div>
    </section>
  ) : (
    <section>
      <div class="prose prose-neutral dark:prose-invert">
        <Root 
          child="LyricSearch" 
          client:only="react" 
        
        /> 
      </div>
    </section>
  )}
</Base>