"use client";

import type { ElementType, ReactNode } from "react";
import { cn } from "@/lib/utils";
import type { TopoSectionTone } from "@/content/topo-patterns";
import { useTopoSectionTone } from "@/components/layout/TopoSectionContext";

type Props = {
  children: ReactNode;
  className?: string;
  tone?: TopoSectionTone;
  as?: ElementType;
};

/** Readable backdrop for large text blocks over the topo pattern */
export function TopoProseSurface({
  children,
  className,
  tone,
  as: Tag = "div",
}: Props) {
  const sectionTone = useTopoSectionTone();
  const resolved = tone ?? sectionTone;

  return (
    <Tag
      className={cn(
        "topo-prose-surface relative z-[15]",
        resolved === "light" && "topo-prose-surface-light",
        resolved === "green" && "topo-prose-surface-green",
        className
      )}
    >
      {children}
    </Tag>
  );
}