import React from "react";

interface ComponentCardProps {
  title?: string;
  titleIcon?: React.ReactNode;
  topUi?: React.ReactNode;
  children: React.ReactNode;
  className?: string; // Additional custom classes for styling
  desc?: string; // Description text
  isOpen?: boolean;
  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
}

const ComponentCard: React.FC<ComponentCardProps> = ({
  title,
  titleIcon,
  topUi,
  children,
  className = "",
  desc = "",
  isOpen,
  setOpen
}) => {
  return (
    <div
      className={`rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] ${className}`}
    >
      {/* Card Header */}
      { title &&
      <div className="px-6 py-3 flex items-center">
        <div className="flex items-center gap-1">
        <h3 className="flex text-base font-medium text-gray-800 dark:text-white/90">
          <span className="inline-flex gap-2 mr-5">{titleIcon}{title}</span>
        </h3>
        </div>
        {desc && (
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 mr-5">
            {desc}
          </p>
        )}
        {topUi}
        { setOpen &&
        <button onClick={() => setOpen(!isOpen)}
          className="ml-5 flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 duration-200 ease-linear dark:bg-white/[0.03] text-gray-800 dark:text-white/90 rotate-180">
          <svg className={`stroke-current transform transition-transform duration-300 ease-in-out ${isOpen ? "rotate-0" : "rotate-180"}`}
            width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.75 8.875L12 15.125L18.25 8.875" stroke="" strokeWidth="2" strokeLinecap="round" ></path>
          </svg>
        </button>
        }
      </div>
      }

      {/* Card Body */}
      { (isOpen === undefined || isOpen === true) && React.Children.map(children, (item, index) => {
        return (
          <div key={index} className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
            <div className="space-y-6">{item}</div>
          </div>
        )
      })}
    </div>
  );
};

export default ComponentCard;
