import { type ReactNode } from 'react'
import { cn } from '@/lib'

// safe-t: 노치 기기에서 헤더가 상태바 밑으로 파고들지 않도록 안전영역만큼 키운다.
// box-content 금지 — w-full + px-* 와 겹치면 폭이 "부모100% + 좌우패딩"이 되어 오른쪽이 잘린다.
// 대신 border-box(기본) 유지하고 min-h 로 56px + 안전영역을 확보한다.
const HEADER_BASE =
  'flex w-full min-h-[calc(56px+env(safe-area-inset-top))] safe-t items-center bg-white text-foreground border-b border-border'

const HEADER_ALIGN = {
  left: 'justify-start',
  center: 'justify-center',
} as const

export interface MainHeaderBarProps {
  align?: keyof typeof HEADER_ALIGN
  className?: string
  children: ReactNode
}

export function MainHeaderBar({ align = 'left', className, children }: MainHeaderBarProps) {
  return <div className={cn(HEADER_BASE, HEADER_ALIGN[align], className)}>{children}</div>
}

export default MainHeaderBar