import { cn } from "@/lib/utils";
import ProBadge from "./ProBadge";

const SectionContainer = ({
  id,
  title,
  children,
  className,
  contentClassName = "",
  pro = false,
}) => {
  return (
    <div
      id={id}
      className={cn(
        "ino:bg-card ino:rounded-lg ino:border ino:border-border ino:shadow-sm",
        className,
      )}
    >
      {title && (
        <h2 className="ino:m-0 ino:flex ino:items-center ino:gap-2 ino:rounded-t-lg ino:border-b ino:border-border ino:px-5 ino:py-4 ino:text-base ino:font-semibold ino:text-card-foreground">
          {title}
          {pro && <ProBadge />}
        </h2>
      )}

      <div className={cn("ino:p-5", contentClassName)}>{children}</div>
    </div>
  );
};
export default SectionContainer;