import { MainLayout } from "@/layout/MainLayout/MainLayout";
import Link from "next/link";
import Searchbar from "@/components/Searchbar/Searchbar";

export default async function Home() {
  const buttons = await fetch(
    "https://cdn.abtmtr.link/site_content/buttons.json",
    { next: { revalidate: 60 } }
  )
    .then((x) => x.json())
    .catch((_) => null);
  const data = await fetch("https://pronouns.cc/api/v1/users/mtr", { next: { revalidate: 3600 } }).then(x=>x.json()).catch(_ => null);
  const domains = await fetch("https://cdn.abtmtr.link/site_content/domain.json", { next: { revalidate: 3600 } })
    .then(x=>x.json()).catch(_ => "[]");

  const goodNames = data.names.filter((x:{status:string})=>x.status == "okay");
  return (
    <MainLayout currentPage="/" title="Root">
      <img className="headerImage" src="/welcome.png" alt="WELCOME! Enjoy your stay at abtmtr.link!"></img>
      <Searchbar />
      <p>abtmtr.link is a domain for a suite of services, ranging from micro-blogging to web search.</p>
      <p>I'm {goodNames[0].value}, otherwise known as {goodNames.slice(1).map((name:{value:string}, idx:number) => (
        idx == goodNames.length - 2 ? (<>or <b>{name.value}</b></>) : (<><b>{name.value}</b>{goodNames.length <= 2 ? ", " : " "}</>)
      ))}.</p>
      <p>It proves very useful for anything and everything that I want to do. It also tends to provide service for others when they need it.</p>
      <h2>Subdomains</h2>
      {domains.map((domain:{
        name: string,
        description: string[],
        url: string,
        src: string
      }) => (
        <div style={{
          margin: "16px 0"
        }}>
          <h2><Link href={domain.url}>{domain.name}</Link></h2>
          <p>{domain.description.join("\n")}</p>
        </div>
      ))}
      <div style={{
        display: "flex",
        justifyContent: "center",
        flexWrap: "wrap",
        padding: 8,
        gap: 8
      }}>{buttons.map((button:{href: string, img: string, alt: string}) => (
        <Link href={button.href} target="_blank">
          <img src={button.img} title={button.alt} alt={button.alt} width="88" height="31" />
        </Link>
      ))}</div>
    </MainLayout>
  )
}