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

export function ZenCard({
  title,
  subtitle,
  children,
  className,
}: {
  title?: string;
  subtitle?: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <section
      className={cn(
        "zen-card relative overflow-hidden rounded-2xl border border-border/60 bg-card/80 p-5 shadow-sm backdrop-blur-sm sm:p-6",
        className,
      )}
    >
      <div className="zen-card-glow pointer-events-none absolute -right-8 -top-8 h-32 w-32 rounded-full opacity-40" />
      {(title || subtitle) && (
        <header className="relative mb-4 border-b border-border/50 pb-3">
          {title && (
            <h2 className="text-base font-medium tracking-wide text-foreground">
              {title}
            </h2>
          )}
          {subtitle && (
            <p className="mt-0.5 text-xs text-muted-foreground">{subtitle}</p>
          )}
        </header>
      )}
      <div className="relative space-y-4">{children}</div>
    </section>
  );
}