import type { ReactNode } from "react";

type Props = {
  children: ReactNode;
  className?: string;
};

/**
 * Khung giấy cổ — nền sổ, lớp hoa văn cực nhạt, triện / enso trang trí tĩnh.
 */
export function NarrativeContainer({ children, className }: Props) {
  return (
    <div
      className={`ctkp-narrative-root relative mx-auto w-full max-w-[860px] px-6 py-9 sm:px-10 sm:py-11 md:px-12 md:py-12 ${className ?? ""}`}
    >
      <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[2px]" aria-hidden>
        <div className="ctkp-narrative-enso" />
        <div className="ctkp-narrative-ink-bleed ctkp-narrative-ink-bleed--tl" />
        <div className="ctkp-narrative-ink-bleed ctkp-narrative-ink-bleed--br" />
        <div className="ctkp-narrative-seal" />
      </div>
      <div className="relative z-[1]">{children}</div>
    </div>
  );
}