---
import { Heading } from "react-bulma-components"

interface StringTitleProp {
  pageTitle?: string;
  pageDesc?: string;
  fullWidth?: boolean;
}

interface ArrayTitleProp {
  pageTitle?: [string, string];
  titleTransition: string;
  pageDesc?: string;
  fullWidth?: boolean;
}

export type Props = StringTitleProp | ArrayTitleProp;

const { props } = Astro;
let maxWidth = props.fullWidth ? "84rem" : "" ;

---

<main id="main-content" style={{ maxWidth: maxWidth }}>
  {
    "titleTransition" in props ? (
      <Heading>
        { props.pageTitle?.[0] }
        <span transition:name={props.titleTransition}>
          { props.pageTitle?.[1] }
        </span>
      </Heading>
    ) : (
      <Heading>{ props.pageTitle }</Heading>
    )
  }
  <p class="my-2">{ props.pageDesc }</p>
  <slot />
</main>

