import React, { type FC, type ReactNode, useRef, useState, memo } from "react";
import { Icon } from "@iconify/react";

import Card from "@/components/elements/base/card/Card";

interface DealCardProps {
  isToggle: boolean;
  title: string;
  children: ReactNode;
}

const DealCardBase: FC<DealCardProps> = ({
  children,
  title,
  isToggle = false,
}) => {
  const [panelOpened, setPanelOpened] = useState(true);

  const dealCardContentRef = useRef<HTMLDivElement>(null);

  return (
    <Card shape="smooth" color="contrast" className="p-5">
      <div
        onClick={() => {
          setPanelOpened(!panelOpened);
        }}
        className={`flex items-center justify-between ${
          panelOpened ? "" : ""
        } ${isToggle ? "cursor-pointer" : ""}`}
      >
        <h3 className="font-sans text-xs font-medium uppercase text-muted-400">
          {title}
        </h3>
        <div
          className={`pointer-events-none ${
            panelOpened ? "rotate-90" : " hover:rotate-90"
          } ${
            isToggle
              ? "flex h-8 w-8 items-center justify-center rounded-full text-muted-400 transition-all duration-300 hover:bg-muted-100 dark:hover:bg-muted-800 [&>svg]:h-4"
              : ""
          }`}
        >
          <Icon icon="lucide:chevron-right" />
        </div>
      </div>
      <div
        ref={dealCardContentRef}
        style={{
          maxHeight: panelOpened
            ? dealCardContentRef.current?.scrollHeight + "px"
            : "0px",
        }}
        className={`grid grid-cols-1 gap-4 overflow-hidden transition-all duration-300 ease-in-out ${
          panelOpened ? "mt-4" : " mt-0"
        }`}
      >
        {children}
      </div>
    </Card>
  );
};

export const DealCard = memo(DealCardBase);