import { useState } from "react";
import CrossCircleIcon from "../../icons/CrossCircleIcon";

type QuestionProps = {
  title: string;
  description: string;
};

const Question = ({ title, description }: QuestionProps) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOnQuestionClick = () => {
    setIsOpen((prev) => !prev);
  };
  return (
    <li
      className={`group cursor-pointer flex justify-between items-center text-2xl border-b flex-col select-none transition-[height] duration-500 overflow-hidden pb-7 ${
        isOpen ? "h-40" : "h-24"
      }`}
      onClick={handleOnQuestionClick}
    >
      <div className="flex w-full justify-between py-7">
        <div>{title}</div>
        <CrossCircleIcon isOpen={isOpen} />
      </div>
      <div className="text-base mr-auto">{description}</div>
    </li>
  );
};

export default Question;
