import { headers, cookies } from "next/headers";
import Image from "next/image";
import styles from "./page.module.css";

export default async function Home() {
  const hdrs = await headers();
  const hypr_auth = hdrs.get("hypr-auth");
  console.log(hdrs.get("hypr-auth"), "lol?");
  const cokis = await cookies();
  console.log({ cokis });
  return (
    <div className={styles.page}>
      <main className={styles.main}>
        <div className={styles.appheader}>
          <Image
            className={styles.logo}
            src="/logo.svg"
            alt="Hyperware logo"
            width={180}
            height={80}
            priority
          />
          <h3 className={`${styles.hyw} ${styles.hywlogo}`}>Hyperware Login</h3>
        </div>
        {hypr_auth ? <HyperLogged token={hypr_auth} /> : <LoginPrompt />}
      </main>
      <footer className={styles.footer}>
        <a
          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            aria-hidden
            src="/window.svg"
            alt="Window icon"
            width={16}
            height={16}
          />
          Examples
        </a>
        <a
          href="https://hyperware.ai"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            aria-hidden
            src="/globe.svg"
            alt="Globe icon"
            width={16}
            height={16}
          />
          Go to hyperware.ai →
        </a>
      </footer>
    </div>
  );
}

function HyperLogged({ token }: { token: string }) {
  const [node, tok] = token.split(":");
  return <div className={styles.ctas}>Hi {node}!</div>;
}
function LoginPrompt() {
  return (
    <div>
      <p style={{ textAlign: "center", marginBottom: "2rem" }}>
        You are not logged in
      </p>
      <div className={styles.ctas}>
        <a
          className={styles.primary}
          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            className={styles.logo}
            src="/vercel.svg"
            alt="Vercel logomark"
            width={20}
            height={20}
          />
          Get on Hyperware
        </a>
        <a
          href="https://hyperware.ai"
          target="_blank"
          rel="noopener noreferrer"
          className={styles.secondary}
        >
          Read More
        </a>
      </div>
    </div>
  );
}
