import { h, type FunctionComponent } from 'preact'
import cn from 'classnames'

import s from './section.module.scss'

const Section: FunctionComponent<{ className?: string; maxWidth?: string; minWidth?: string }> & {
  Body: typeof SectionBody
  Footer: typeof SectionFooter
  Heading: typeof SectionHeading
} = ({ children, className, maxWidth, minWidth }) => (
  <section className={cn(s.base, className)} style={{ maxWidth, minWidth }}>
    {children}
  </section>
)

const SectionBody: FunctionComponent<{ className?: string; noPadding?: boolean }> = ({
  children,
  className,
  noPadding,
}) => <div className={cn(s.body, noPadding && s.noPadding, className)}>{children}</div>

Section.Body = SectionBody

const SectionHeading: FunctionComponent<{ className?: string }> = ({ children, className }) => (
  <h1 className={cn(s.heading, className)}>{children}</h1>
)

Section.Heading = SectionHeading

const SectionFooter: FunctionComponent<{ className?: string }> = ({ children, className }) => (
  <div className={cn(s.footer, className)}>{children}</div>
)

Section.Footer = SectionFooter

export default Section