import { MainLayout } from "@components/layouts/main.tsx";
import { Card } from "@components/Card.tsx";
import { PageProps } from "$fresh/server.ts";
import { resources } from "@lib/resources.ts";
import { RedirectSearchHandler } from "@islands/Search.tsx";
import { KMenu } from "@islands/KMenu.tsx";

export default function Home(props: PageProps) {
  return (
    <>
      <RedirectSearchHandler />
      <KMenu type="main" context={false} />
      <MainLayout url={props.url}>
        <h1 class="text-4xl mb-4 mt-3 text-white flex gap-2">
          <img src="/favicon.png" class="w-8 h-8 inline" />
          Resources
        </h1>
        <div class="flex flex-wrap items-center gap-4">
          {Object.values(resources).filter((v) => v.link !== "/").map((m) => {
            return (
              <Card
                title={`${m.name}`}
                backgroundSize={80}
                image={`${
                  m.emoji.endsWith(".png")
                    ? `/emojis/${encodeURIComponent(m.emoji)}`
                    : "/placeholder.svg"
                }`}
                link={m.link}
              />
            );
          })}
        </div>
      </MainLayout>
    </>
  );
}