"use client";

import { FolderKanban } from "lucide-react";

import { useProjects } from "@/components/projects/projects-context";
import { ProjectCard } from "@/components/projects/project-card";
import { CreateProjectDialog } from "@/components/projects/create-project-dialog";

export function ProjectsListView() {
  const { projects } = useProjects();

  return (
    <div className="flex h-full flex-col gap-4 p-4">
      <div>
        <h1 className="text-2xl font-bold">Projects</h1>
        <p className="text-sm text-muted-foreground">
          Each project is its own isolated board -- separate categories, groups, and to-dos from
          Home and from every other project.
        </p>
      </div>

      {projects.length === 0 && (
        <div className="flex flex-col items-center gap-3 p-8 text-center">
          <div className="flex size-16 items-center justify-center rounded-full bg-primary/10 text-primary">
            <FolderKanban className="size-8" />
          </div>
          <h2 className="text-lg font-semibold">No projects yet</h2>
          <p className="max-w-sm text-sm text-muted-foreground">
            Create one to get its own board, separate from Home.
          </p>
        </div>
      )}

      <div className="grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4">
        {projects.map((project) => (
          <ProjectCard key={project.id} project={project} />
        ))}
        <CreateProjectDialog />
      </div>
    </div>
  );
}