"use client"
import React, { useState } from 'react';
import { useEffect } from 'react';

interface AccordionProps {
  title: string;
  children: React.ReactNode;
  isOPen : boolean;
}

const Accordion: React.FC<AccordionProps> = ({ title, children, isOPen }) => {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const checkisOPen = () => {
      setIsOpen(isOPen);
    }

    checkisOPen()
  }, [setIsOpen])

  const toggleAccordion = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="w-full my-4  pb-2 group hover:border-b-[1px] border-solid border-grey-text">
      <div
        className=" text-grey-text hover:text-main py-2  cursor-pointer flex flex-row justify-between items-center "
        onClick={toggleAccordion}>
        <span className='text-xl'>{title}</span>
        <div className='flex flex-row'>
          <span className='pr-2 text-xl hidden group-hover:block'>-</span>
          <span className='pr-2 text-xl group-hover:hidden'>+</span>
        </div>
        
      </div>
      <div className="hidden group-hover:block pt-2  text-base">{children}</div>
    </div>
  );
};

export default Accordion;