import { ReactNode } from "react";

function Container({
  title,
  children,
  footer,
  className = "",
  bodyClassName = "",
}: {
  title: string | ReactNode;
  children: React.ReactNode;
  footer?: ReactNode;
  className?: string;
  bodyClassName?: string;
}) {
  return (
    <>
      <div
        className={`${className} uikit-flex uikit-h-full uikit-flex-1 uikit-flex-col uikit-justify-between uikit-px-[20px] uikit-pb-[16px] uikit-pt-[20px]`}
      >
        <h2 className="uikit-text-[20px] uikit-py-[7px] uikit-font-bold uikit-text-left uikit-text-t1">
          {title}
        </h2>

        <div className="uikit-mt-[10px] uikit-w-full uikit-flex-1 uikit-rounded-[12px]">
          <div
            className={`${bodyClassName} uikit-rounded-[12px] uikit-bg-bg3 uikit-px-[20px] uikit-pt-[12px]`}
          >
            {children}
          </div>
        </div>

        {footer}
      </div>
    </>
  );
}

export default Container;