import { MainLayout } from "@/layout/MainLayout/MainLayout";
import Link from "next/link";
import Markdown from "react-markdown";
import rehypeRaw from "rehype-raw";

export default async function Home() {
  const projects = await fetch("https://projects.abtmtr.link/projects.json").then(x=>x.json());
  return (
    <MainLayout currentPage="/projects/" title="Projects" subtitle="by MeowcaTheoRange">
      <img className="headerImage" src="/headers/projects.png" alt="PROJECTS"></img>
      {projects.items.map((project:{
        name: string,
        date: number,
        description: string[],
        url: string,
        hotlink?: boolean
      }) => (
        <div style={{
          margin: "16px 0"
        }}>
          <h2><Link href={project.url} target="_blank">{project.name}</Link></h2>
          <p><small>Hosted on {new URL(project.url).host} - Created {new Date(project.date).toLocaleDateString()}</small></p>
          <Markdown rehypePlugins={[rehypeRaw]}>{project.description.join("\n")}</Markdown>
        </div>
      ))}
    </MainLayout>
  )
}
