import { useState } from 'react';
import PlusIcon from '../../public/icons/plus.svg';
import SubtractionIcon from '../../public/icons/subtraction.svg';

interface FAQProps {
  question: string;
  answer: string;
}

const FAQ: React.FC<FAQProps> = ({ answer, question }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className='flex flex-col'>
      <div
        className={`flex bg-white px-10 py-12 w-full text-lg 2xl:text-xl border z-10 transform duration-150 transition-all ${
          isOpen ? 'border-primary border-b-0' : 'border-gray-300'
        }`}
      >
        <div className='flex w-full justify-between space-x-5'>
          <h1 className='text-xl 2xl:text-2xl'>{question}</h1>
          <div>
            {isOpen ? (
              <SubtractionIcon className='w-5 h-5 cursor-pointer' onClick={() => setIsOpen(!isOpen)} />
            ) : (
              <PlusIcon className='w-5 h-5 cursor-pointer' onClick={() => setIsOpen(!isOpen)} />
            )}
          </div>
        </div>
      </div>
      <div
        className={`bg-white w-full transform duration-150 px-10 transition-all border border-t-0 border-primary ${
          isOpen ? 'opacity-100 z-10 -translate-y-5 pb-12' : 'opacity-0 -translate-y-10'
        }`}
      >
        <p className={`sm:w-4/5 m-0`}>{answer}</p>
      </div>
    </div>
  );
};

export default FAQ;