"use client";

import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

interface QuestionItemProps {
  question: ReactNode;
  answer: ReactNode;
  isOpen: boolean;
  onToggle: () => void;
}

export default function QuestionItem({
  question,
  answer,
  isOpen,
  onToggle,
}: QuestionItemProps) {
  return (
    <div className="flex flex-col">
      <h3
        onClick={onToggle}
        className={cn(
          "text-[16px] sm:text-[24px] cursor-pointer transition-all duration-300 ps-5",
          isOpen
            ? "font-bold text-natural-vanilla border-s-4 border-secondary-light mb-6"
            : "font-light text-natural-vanilla"
        )}
      >
        {question}
      </h3>
      <div
        className={cn(
          "overflow-hidden transition-all duration-300 ease-in-out",
          isOpen ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"
        )}
      >
        <p className="text-[14px] sm:text-[20px] font-light">{answer}</p>
      </div>
    </div>
  );
}