import {type ReactNode} from 'react'
import {View} from 'react-native'

import {Text} from '@/components/ui/typography'
import {atoms as a, useTheme} from '@/sprinkles'

// a labeled form section: the muted label + control block every form repeats
export const FormField = ({
  label,
  children,
}: {
  label: string
  children: ReactNode
}) => {
  const t = useTheme()
  return (
    <View style={[a.gap_sm, a.py_sm]}>
      <Text style={t.atoms.text_contrast_medium}>{label}</Text>
      {children}
    </View>
  )
}
