import type { ReactNode } from 'react'
import { Breadcrumbs } from './Breadcrumbs'
import pageStyles from './PageContent.module.css'
import styles from '../pages/WebsitePage.module.css'

interface WebsiteSectionShellProps {
  sectionLabel: string
  title: string
  subtitle: string
  children?: ReactNode
}

export function WebsiteSectionShell({
  sectionLabel,
  title,
  subtitle,
  children,
}: WebsiteSectionShellProps) {
  return (
    <main className={pageStyles.content}>
      <Breadcrumbs
        items={[
          { label: 'Dashboard', href: '/' },
          { label: 'Website', href: '/website' },
          { label: sectionLabel },
        ]}
      />

      <div className={pageStyles.pageHeader}>
        <div>
          <h2 className={pageStyles.pageTitle}>{title}</h2>
          <p className={pageStyles.pageSubtitle}>{subtitle}</p>
        </div>
      </div>

      <section className={styles.panel}>{children}</section>
    </main>
  )
}