import { cn } from "@/lib/utils";
import type { ReactNode } from "react";

type PropsType = {
  title?: string | ReactNode;
  children: ReactNode;
  /** Merges into the padded content wrapper below the title */
  className?: string;
  /** Merges into the outer card (e.g. `h-full flex flex-col` for grid rows) */
  rootClassName?: string;
};

export function ShowcaseSection({ title, children, className, rootClassName }: PropsType) {
  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-2xl border border-stroke/70 bg-gradient-to-br from-white via-white to-primary/[0.03] shadow-theme-xs dark:border-dark-3 dark:from-gray-dark dark:via-gray-dark dark:to-primary/[0.08]",
        rootClassName,
      )}
    >
      <div className="pointer-events-none absolute -right-12 -top-12 h-32 w-32 rounded-full bg-primary/10 blur-3xl dark:bg-primary/20" />
      <div className="pointer-events-none absolute -bottom-12 -left-12 h-32 w-32 rounded-full bg-purple-500/10 blur-3xl dark:bg-purple-500/20" />
      {title && (
        <h2 className="shrink-0 border-b border-stroke/70 bg-white/70 px-4 py-4 text-base font-semibold text-dark backdrop-blur-sm dark:border-dark-3 dark:bg-dark-2/40 dark:text-white sm:px-6 xl:px-7.5">
          {title}
        </h2>
      )}

      <div className={cn("p-4 sm:p-6 xl:p-10", className)}>{children}</div>
    </div>
  );
}
