import {type ReactNode} from 'react'
import {View} from 'react-native'
import {useSafeAreaInsets} from 'react-native-safe-area-context'

import {
  atoms as a,
  tokens,
  useTheme,
  type ViewStyleProp,
} from '@/sprinkles'

// the shared dm bottom-bar chrome: top border, screen bg, gutter padding,
// and safe-area bottom inset
export const BottomBar = ({
  gutter = tokens.space.md,
  style,
  children,
}: {
  gutter?: number
  style?: ViewStyleProp
  children: ReactNode
}) => {
  const t = useTheme()
  const insets = useSafeAreaInsets()
  return (
    <View
      style={[
        a.px_2xl,
        a.border_t,
        t.atoms.bg,
        t.atoms.border_contrast_low,
        {
          paddingTop: gutter,
          paddingBottom: insets.bottom + gutter,
        },
        style,
      ]}
    >
      {children}
    </View>
  )
}
