import type { ReactNode } from "react";

type PanelProps = {
  titleId: string;
  title: string;
  actions?: ReactNode;
  children: ReactNode;
  footer?: ReactNode;
};

function Panel({ titleId, title, actions, children, footer }: PanelProps) {
  return (
    <section aria-labelledby={titleId}>
      <header>
        <h2 id={titleId}>{title}</h2>
        {actions ? <div>{actions}</div> : null}
      </header>
      <div>{children}</div>
      {footer ? <footer>{footer}</footer> : null}
    </section>
  );
}

export function ProfileSettings() {
  return (
    <Panel
      titleId="profile-settings-title"
      title="Profile settings"
      actions={<button type="button">Simpan draft</button>}
      footer={<p>Perubahan belum dikirim ke server.</p>}
    >
      <p>Atur nama tampilan dan bio kamu di area ini.</p>
    </Panel>
  );
}