import * as React from "react"

import { cn } from "@/lib/utils"

const sectionBg = {
  white: "bg-white",
  surface: "bg-surface",
  dark: "bg-ink text-white",
  /** 히어로와 같은 무대. 어두운 섹션은 이걸 쓴다 — 페이지 안에 어둠이 두 종류면 따로 논다. */
  stage: "stage-bg text-on-stage",
}

const sectionWidth = {
  sm: "max-w-3xl",
  md: "max-w-4xl",
  lg: "max-w-5xl",
}

type SectionProps = React.HTMLAttributes<HTMLElement> & {
  bg?: keyof typeof sectionBg
  /** 내부 컨테이너 최대폭 */
  width?: keyof typeof sectionWidth
  /** 상단 구분선. 하단까지 필요하면 className 에 border-b border-line 추가 */
  bordered?: boolean
  /** 컨테이너 밖(섹션 전체 기준)에 까는 장식 요소 — 배경 블롭 등 */
  decor?: React.ReactNode
  containerClassName?: string
}

function Section({
  bg = "white",
  width = "md",
  bordered = false,
  decor,
  className,
  containerClassName,
  children,
  ...props
}: SectionProps) {
  return (
    <section
      /* 레퍼런스 섹션 패딩은 104~139px. 176px 은 과해서 "채울 내용이 없어" 보인다. */
      className={cn("py-24 md:py-32", sectionBg[bg], bordered && "border-t border-line", decor && "relative overflow-hidden", className)}
      {...props}
    >
      {decor}
      <div className={cn("mx-auto px-6", sectionWidth[width], decor && "relative z-10", containerClassName)}>{children}</div>
    </section>
  )
}

export { Section }