import clsx from "clsx";
import React, { useState } from "react";
import { motion } from "motion/react";
import ArrowUpIcon from "../icons/ArrowUpIcon";

interface AccordeonProps {
  label: string;
  subtitle: string;
  content: React.ReactNode;
  className?: string;
  open?: boolean;
  onClick?: () => void;
}

export default function Accordeon({
  label,
  subtitle,
  content,
  className,
  open,
  onClick,
}: AccordeonProps) {
  const [isOpen, setIsOpen] = useState(open || false);

  function handleAccordeonClick() {
    setIsOpen(!isOpen);
    onClick?.();
  }

  return (
    <div
      onClick={handleAccordeonClick}
      className={clsx(
        "2xl:py-[3.333vw] md:py-[5.208vw] py-[6.667vw] 2xl:px-0 md:px-[3.125vw] px-[4.444vw] border-y border-[#ECE8DF] hover:cursor-pointer select-none",
        isOpen
          ? "2xl:bg-[radial-gradient(circle_at_center,#F0EDE680_0%,#F0EDE600_80%)] md:bg-[linear-gradient(to_top,#F0EDE680_0%,#F0EDE600_70%)]"
          : "bg-transparent",
        className
      )}
    >
      <div className="relative 2xl:pl-[23.889vw] flex flex-col 2xl:justify-between items-start justify-start md:gap-[1.563vw] gap-[3.333vw]">
        <p className="text-s max-md:caption max-2xl:font-medium text-[#324D4399] 2xl:absolute 2xl:left-0 2xl:top-1/2 2xl:-translate-y-1/2 font-[Poppins]">
          {subtitle}
        </p>
        <h3 className="2xl:h3 subheadline-m text-[#324D43] [font-family:New_York_Large]">
          {label}
        </h3>
        <div
          className={clsx(
            "2xl:size-[1.111vw] md:size-[2.083vw] size-[4.444vw] absolute right-0 top-1/2 -translate-y-1/2 transition-transform duration-300",
            !isOpen && "rotate-180"
          )}
        >
          <ArrowUpIcon />
        </div>
      </div>

      <motion.div
        initial={false}
        animate={{
          height: isOpen ? "auto" : 0,
          opacity: isOpen ? 1 : 0,
        }}
        transition={{ duration: 0.3, ease: "easeInOut" }}
        style={{ overflow: "hidden" }}
      >
        <div className="2xl:mt-[1.667vw] md:mt-[2.083vw] mt-[3.333vw]">
          {content}
        </div>
      </motion.div>
    </div>
  );
}
