import { FreshContext, Handlers, PageProps } from "$fresh/server.ts";
import { ProjectCard } from "../../islands/ProjectCard.tsx";

interface ProjectData {
  project_id: number;
  title: string;
  repo?: string;
  summary: string;
  description?: string;
  tech: string;
  wip?: boolean;
  created_at: string;
  images: Array<string>;
}

export const handler: Handlers<Array<ProjectData>> = {
  async GET(_req: Request, ctx: FreshContext) {
    const projectResult = await fetch(
      `${Deno.env.get("BASE_URI_API")}/projects`,
    );

    const projectData = await projectResult.json();
    return ctx.render(projectData);
  },
};

export default function Projects(props: PageProps<Array<ProjectData>>) {
  const projects = props.data;

  return (
    <div class="space-y-12 px-10 py-8 sm:min-h-screen bg-[#313244]">
      <section
        id="projects"
        class="lg:grid-cols-desktop grid scroll-mt-8 grid-cols-1 gap-x-4 gap-y-2 bg-[#313244] "
      >
        <h1 class="text-3xl text-white font-bold uppercase text-center">
          Projects
        </h1>
        <p class="md:text-lg sm:text-md text-white">
          Here's a collection of software and electronics projects I've been
          tinkering with during my free time - some are ongoing adventures,
          others are finished experiments, but they've all been exciting
          challenges that keep me busy when I'm not doing "real work" stuff!
        </p>
        <div class="grid grid-cols-1 sm:grid-cols-2">
          {projects.map((project: ProjectData) => {
            return (
              <ProjectCard
                title={project.title}
                repo={project.repo ?? undefined}
                summary={project.summary}
                description={
                  project.description ??
                  "No description found. Perhaps you should check out the repository instead!"
                }
                tech={project.tech}
                wip={project.wip ?? true}
                images={project.images}
              />
            );
          })}
        </div>
      </section>
    </div>
  );
}