"use client";
import { useUser } from "@/hooks/useUser";
import { Project } from "@/types";
import { redirect } from "next/navigation";
import { ProjectCard } from "./project-card";
import { Plus } from "lucide-react";
import Link from "next/link";

export function MyProjects({ projects }: { projects: Project[] }) {
  const { user } = useUser();
  if (!user) {
    redirect("/");
  }
  return (
    <>
      <section className="max-w-[86rem] py-12 px-4 mx-auto">
        <div className="text-left">
          <h1 className="text-3xl font-bold text-white">
            <span className="capitalize">{user.fullname}</span>&apos;s DeepSite
            Projects
          </h1>
          <p className="text-muted-foreground text-base mt-1 max-w-xl">
            Create, manage, and explore your DeepSite projects.
          </p>
        </div>
        <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          <Link
            href="/projects/new"
            className="bg-neutral-900 rounded-xl h-44 flex items-center justify-center text-neutral-300 border border-neutral-800 hover:brightness-110 transition-all duration-200"
          >
            <Plus className="size-5 mr-1.5" />
            Create Project
          </Link>
          {projects.map((project: Project) => (
            <ProjectCard key={project._id} project={project} />
          ))}
        </div>
      </section>
    </>
  );
}