import type { PropsWithChildren, ReactNode } from "react";

interface SectionProps extends PropsWithChildren {
  id: string;
  kicker: string;
  title: string;
  description: string;
  aside?: ReactNode;
}

export function Section({ id, kicker, title, description, aside, children }: SectionProps) {
  return (
    <section id={id} className="section shell-block">
      <div className="section-header">
        <div>
          <p className="section-kicker">{kicker}</p>
          <h2>{title}</h2>
          <p className="section-description">{description}</p>
        </div>
        {aside ? <div className="section-aside">{aside}</div> : null}
      </div>
      {children}
    </section>
  );
}