import { useRef } from "react";
import { AccordionType } from "../../types";

type AccordionProps = {
  accordion: AccordionType;
  isSelected?: boolean;
  onClick: () => void;
};

const Accordion = ({
  accordion,
  onClick,
  isSelected = false,
}: AccordionProps) => {
  const { title, description, icon, content } = accordion;
  const divRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);

  const handleOnClick = () => {
    onClick();

    const timeout = setTimeout(() => {
      window.scrollTo({
        top: contentRef.current?.offsetTop,
        behavior: "smooth",
      });

      clearTimeout(timeout);
    }, 500);
  };

  return (
    <div
      ref={contentRef}
      className={`overflow-y-hidden  ${
        !isSelected ? "max-h-[165px]" : "max-h-[2000px]"
      } transition-all duration-500 ease-in-out`}
    >
      <div className="flex flex-col border-b border-[#e5e0ee]">
        <div
          ref={divRef}
          className="flex w-[1440px] mx-auto py-8 cursor-pointer select-none justify-between"
          onClick={handleOnClick}
        >
          <div className="flex flex-col gap-3">
            <div className="font-bold text-6xl">{title}</div>
            <div className="text-[#bca6ea] text-xl">{description}</div>
          </div>
          <img src={icon} alt={title} className="w-20" />
        </div>
      </div>
      <div className="w-[1440px] mx-auto py-20">{content}</div>
    </div>
  );
};

export default Accordion;

// const contentRef = useRef<HTMLDivElement>(null);
//   const divRef = useRef<HTMLDivElement>(null);

//   function handleClick() {
//     onClick();

//     setTimeout(() => {
//       window.scrollTo({
//         top: divRef.current?.offsetTop,
//         behavior: "smooth",
//       });
//     }, 200);
//   }

//   return (
//     <div ref={divRef} className="w-[300px] flex flex-col">
//       <button onClick={handleClick} className="p-4 bg-red-300">
//         {title}
//       </button>
//       <div
//         ref={contentRef}
//         className={`bg-blue-300 ${
//           selected
//             ? `${contentRef.current} opacity-100 h-[1500px]`
//             : "h-0 opaci
