import type { ReactNode } from "react";

interface Props {
  title: string;
  subtitle?: string;
  right?: ReactNode;
  children: ReactNode;
}

export function Section({ title, subtitle, right, children }: Props) {
  return (
    <section
      style={{
        background: "#fff",
        border: "1px solid #e6e8ec",
        borderRadius: 12,
        padding: 20,
        marginTop: 16,
      }}
    >
      <header
        style={{
          display: "flex",
          alignItems: "flex-start",
          justifyContent: "space-between",
          gap: 16,
          marginBottom: 12,
        }}
      >
        <div>
          <h2 style={{ margin: 0, fontSize: 18 }}>{title}</h2>
          {subtitle ? (
            <p style={{ margin: "4px 0 0", color: "#5b6066", fontSize: 13 }}>
              {subtitle}
            </p>
          ) : null}
        </div>
        {right ? <div>{right}</div> : null}
      </header>
      {children}
    </section>
  );
}