import Accordion from "./Accordion";
import { AccordionType } from "../../types";
import { useState } from "react";
import VR from "./accordions/VR";
import AR from "./accordions/AR";
import MobileApp from "./accordions/MobileApp";
import TouchScreen from "./accordions/TouchScreen";
import WebGl from "./accordions/WebGl";
import KinnectRealSense from "./accordions/KinnectRealSense";

const accordions: AccordionType[] = [
  {
    title: "VR",
    description: "Виртуальная реальность",
    content: <VR />,
    icon: "/images/accordion-1.svg",
    id: 1,
  },
  {
    title: "AR",
    description: "Дополненная реальность",
    content: <AR />,
    icon: "/images/accordion-2.svg",
    id: 2,
  },
  {
    title: "Mobile App",
    description: "Мобильные приложения",
    content: <MobileApp />,
    icon: "/images/accordion-3.svg",
    id: 3,
  },
  {
    title: "Touch-screen",
    description: "3D графика для презентаций",
    content: <TouchScreen />,
    icon: "/images/accordion-4.svg",
    id: 4,
  },
  {
    title: "WEB GL",
    description: "3D для сайта и мобильных приложений",
    content: <WebGl />,
    icon: "/images/accordion-5.svg",
    id: 5,
  },
  {
    title: "KINECT REAL SENSE",
    description: "Презентации с бесконтактным управлением",
    content: <KinnectRealSense />,
    icon: "/images/accordion-6.svg",
    id: 6,
  },
];

const AccordionsContainer = () => {
  const [selected, setSelected] = useState<AccordionType | null>(null);

  const handleOnClick = (accordion: AccordionType) => {
    if (selected?.id === accordion.id) {
      setSelected(null);
    } else {
      setSelected(accordion);
    }
  };

  return (
    <div className="flex flex-col bg-white">
      {accordions.map((acc) => (
        <Accordion
          accordion={acc}
          key={acc.id}
          isSelected={selected?.id === acc.id}
          onClick={() => handleOnClick(acc)}
        />
      ))}
    </div>
  );
};

export default AccordionsContainer;
