import { useState } from "react";
import projectsData from "./data/projects.json";
import ProjectGrid from "./components/ProjectGrid";
import ProjectListHeader from "./components/ProjectListHeader";
import WorkspaceInfoBanner from "./components/WorkspaceInfoBanner";
import type { ProjectItem, WorkspaceInfo } from "./types/ProjectTypes";

const List = () => {
  const { workspace, projects: initialProjects } = projectsData as {
    workspace: WorkspaceInfo;
    projects: ProjectItem[];
  };

  const [projects, setProjects] = useState<ProjectItem[]>(initialProjects);

  const handleDelete = (id: string) => {
    setProjects((prev) => prev.filter((project) => project.id !== id));
  };

  return (
    <div className="w-full mt-4">
      <ProjectListHeader title={workspace.name} />

      <WorkspaceInfoBanner description={workspace.description} />

      <ProjectGrid projects={projects} onDelete={handleDelete} />
    </div>
  );
};

export default List;