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

export default define.page(function (props: PageProps) {
  return (
    <>
      <RedirectSearchHandler />
      <KMenu type="main" context={false} />
      <MainLayout url={props.url}>
        <div class="flex flex-wrap items-center gap-4">
          {Object.values(resources).filter((v) => v.link !== "/").map((m) => {
            return (
              <Card
                key={m.link}
                title={`${m.name}`}
                backgroundSize={80}
                image={`${
                  m.emoji.endsWith(".png")
                    ? `/emojis/${encodeURIComponent(m.emoji)}`
                    : "/placeholder.svg"
                }`}
                link={m.link}
              />
            );
          })}
        </div>
      </MainLayout>
    </>
  );
});