import { useTranslations } from "next-intl";
import { Collapse } from "antd";

interface props {
  children: React.ReactNode;
  title?: string;
  className?: string;
  icon?: React.ReactNode;
}

const BodyWrapper = ({ children, title,icon,className }: props) => {
  const t = useTranslations();
  // const items = [
  //   {
  //     key: "1",
  //     label:(
  //       <div className="flex items-center gap-2">
  //         {icon ? icon : "" }
  //         {t(title)}
  //       </div>
  //     ),
  //     children,
  //   },
  // ];
  return (
    <section className={`account-content px-3 ${className || ""}`}>
      {title ?(
        <div data-aos="fade-up" className="flex items-center gap-2 mb-5 lg:mb-10  font-bold text-lg md:text-2xl">
            {icon ? icon : "" }
            {t(title)}
          </div>
        ):""}
        {children}
    </section>
  );
};

export default BodyWrapper;