export function ProposalReviewCard({
  title,
  before,
  after,
  onApprove,
  onReject,
  isSubmitting = false,
}: {
  title: string;
  before: string;
  after: string;
  onApprove?: () => void;
  onReject?: () => void;
  isSubmitting?: boolean;
}) {
  return (
    <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
        <div style={{ fontWeight: 700 }}>{title}</div>
        <div style={{ display: "flex", gap: "var(--ml-space-2)", alignItems: "center", flexWrap: "wrap" }}>
          <span className="badge">before / after</span>
          {onReject ? (
            <button
              type="button"
              className="surface-muted"
              onClick={onReject}
              disabled={isSubmitting}
              style={{ border: "1px solid var(--ml-border-subtle)", borderRadius: "var(--ml-radius-md)", padding: "8px 12px" }}
            >
              Reject
            </button>
          ) : null}
          {onApprove ? (
            <button
              type="button"
              onClick={onApprove}
              disabled={isSubmitting}
              style={{
                border: "none",
                borderRadius: "var(--ml-radius-md)",
                padding: "8px 12px",
                background: "var(--ml-accent-primary)",
                color: "var(--ml-text-primary)",
                fontWeight: 600,
              }}
            >
              Approve
            </button>
          ) : null}
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "var(--ml-space-4)" }}>
        <div className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}>
          <strong>Before</strong>
          <div style={{ color: "var(--ml-text-secondary)", whiteSpace: "pre-wrap" }}>{before}</div>
        </div>
        <div className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}>
          <strong>After</strong>
          <div style={{ color: "var(--ml-text-secondary)", whiteSpace: "pre-wrap" }}>{after}</div>
        </div>
      </div>
    </section>
  );
}