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

const HEADER_BASE =
  'flex w-full h-[56px] py-[18px] items-center rounded-t-[8px] bg-primary text-primary-foreground'

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