import ChevronDownIcon from '@heroicons/react/20/solid/ChevronDownIcon';

import ChevronUpIcon from '@heroicons/react/20/solid/ChevronUpIcon';

import React from 'react';

import { useState } from 'react';

export default function QA({ children, q }) {

  const [visible, setVisible] = useState(false);

  return (

    <div className="py-4 px-6 pr-10 bg-lineHighlight relative mb-4">

      <div className="cursor-pointer" onClick={() => setVisible((v) => !v)}>

        <div>{q}</div>

        <a className="p-1 absolute top-4 right-4">

          {visible ? <ChevronUpIcon className="w-5 h-5" /> : <ChevronDownIcon className="w-5 h-5" />}

        </a>

      </div>

      {visible && <div>{children}</div>}

    </div>

  );

}