import TranslateClient from "@/components/ui/localization/TranslateClient";
import { cn } from "@/lib/utils";
import React from "react";

type props = {
  className?: string;
  contentClassName?: string;
  btn?: React.ReactNode;
  title: string;
  children: React.ReactNode;
};
function InfoBox({ className, title, children, btn, contentClassName }: props) {
  return (
    <div className={cn(`border border-mainBlue mb-5 ${className}`)}>
      {btn ? (
        <div className="flex items-center justify-between p-3 bg-mainBlue mb-8 ">
          <h2 className="p-3 bg-mainBlue text-white capitalize">
            <TranslateClient text={title} />
          </h2>
          {btn}
        </div>
      ) : (
        <h2 className="p-3 bg-mainBlue text-white capitalize">
          <TranslateClient text={title} />
        </h2>
      )}

      <div className={cn("p-3", contentClassName)}>{children}</div>
    </div>
  );
}

export default InfoBox;