import { useState } from "react";
import ProjectSelect from "../components/ProjectSelect";
import { projects } from "../data/projects";
import clsx from "clsx";
import UnitTypeCard from "../components/UnitTypeCard";
import { AnimatePresence, motion } from "motion/react";

function UnitTypesPage() {
  const [selectedProject, setSelectedProject] = useState(projects[0]);

  return (
    <div className="">
      <div
        className={clsx(
          "2xl:p-[2.222vw] md:max-2xl:p-6 p-4 bg-white 2xl:rounded-b-[1.667vw] rounded-b-3xl 2xl:space-y-[2.222vw] md:max-2xl:space-y-8 space-y-4"
        )}
      >
        <div className="2xl:space-y-[1.111vw] space-y-4">
          <p className="2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-medium leading-[135%]">
            Unit Types
          </p>
          <ProjectSelect
            projects={projects}
            onSelect={(project) => setSelectedProject(project)}
          />
        </div>
      </div>
      <AnimatePresence mode="wait">
        <motion.div
          layout
          key={selectedProject.title}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="m-4 md:max-2xl:m-6 2xl:m-[2.222vw] grid grid-cols-1 md:max-2xl:grid-cols-2 2xl:grid-cols-4 gap-4 2xl:gap-[1.111vw]"
        >
          {selectedProject.types?.map((type, index) => (
            <UnitTypeCard
              key={index}
              project={selectedProject.title}
              type={type}
            />
          ))}
        </motion.div>
      </AnimatePresence>
    </div>
  );
}

export default UnitTypesPage;