import { useId, type ReactNode } from "react";
import { Modal } from "./Modal";

/** Secondary workspace flows share one modal presentation. */
export function WorkspacePanel({ id, eyebrow, title, description, children, onClose, closeLabel = "Close panel", busy }: {
  id: string; eyebrow: string; title: string; description?: string; children: ReactNode; onClose?: () => void; closeLabel?: string; busy?: boolean;
}) {
  return <Modal id={id} eyebrow={eyebrow} title={title} description={description} onClose={onClose} closeLabel={closeLabel} busy={busy}>{children}</Modal>;
}

/** Consistent label, explanation and control columns for preference forms. */
export function SettingRow({ title, description, children }: { title: string; description: ReactNode; children: ReactNode }) {
  const id = useId();
  return <section className="ds-setting-row" aria-labelledby={id}>
    <header className="ds-setting-heading"><h3 id={id}>{title}</h3><div>{description}</div></header>
    <div className="ds-setting-controls">{children}</div>
  </section>;
}

export function FormMessage({ children, error = false }: { children: ReactNode; error?: boolean }) {
  return <p className={`ds-form-message${error ? " ds-form-message--error" : ""}`} role={error ? "alert" : "status"}>{children}</p>;
}
