import type { ReactNode } from "react";
import PolicySourcePath, { type PolicySourcePathItem } from "./PolicySourcePath";

export type EffectivePolicyBlockProps = {
  title: string;
  sourcePath?: PolicySourcePathItem[];
  children: ReactNode;
  className?: string;
  gridClassName?: string;
};

export function EffectivePolicyValue({ label, value }: { label: string; value: ReactNode }) {
  return <div><span>{label}</span><strong>{value}</strong></div>;
}

export default function EffectivePolicyBlock({ title, sourcePath, children, className = "", gridClassName = "" }: EffectivePolicyBlockProps) {
  return (
    <section className={`policy-effective-block ${className}`.trim()}>
      <h3>{title}</h3>
      {sourcePath && <PolicySourcePath items={sourcePath} />}
      <div className={gridClassName || "policy-effective-grid"}>{children}</div>
    </section>
  );
}
