"use client";
import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
import { useState } from "react";
import { cn } from "clsx-tailwind-merge";
import { fadeInOut } from "@/utils/variants";

type QuestionProps = {
  q: string;
  a: string;
};

const Question = ({ q, a }: QuestionProps) => {
  const [expanded, setExpanded] = useState(false);
  return (
    <LayoutGroup>
      <motion.li
        className="max-w-[50rem] mx-auto mawdy-box-shadow rounded-lg flex p-4 justify-between items-start group cursor-pointer"
        layout
        onClick={() => setExpanded(!expanded)}
      >
        <motion.div layout="position">
          <motion.h3 layout="position" className="text-[1.125rem] md:text-[1.25rem] font-bold">
            {q}
          </motion.h3>
          <AnimatePresence>
            {expanded && (
              <motion.h4
                {...fadeInOut({ delay: 0.5 })}
                className="text-[0.875rem] md:text-[1rem] max-w-[43.75rem] mt-2"
              >
                {a}
              </motion.h4>
            )}
          </AnimatePresence>
        </motion.div>

        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 40 40"
          fill="none"
          className={cn("w-10 h-10 transition-all duration-300 ease-in-out flex-shrink-0", { "rotate-180": expanded })}
        >
          <mask id="mask0_659_271" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
            <rect width="40" height="40" transform="matrix(-1 0 0 1 40 0)" fill="#D9D9D9" />
          </mask>
          <g mask="url(#mask0_659_271)">
            <path
              d="M20 25.6666L30 15.6666L27.6667 13.3333L20 21L12.3333 13.3333L10 15.6666L20 25.6666Z"
              className="fill-light-blue group-hover:fill-dark-blue"
            />
          </g>
        </svg>
      </motion.li>
    </LayoutGroup>
  );
};

export default Question;