import { StyleSheet, Text, View } from 'react-native'
import { NAVY, TEXT } from '@/src/shared/constants/colors'
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'
import { FONT_FAMILY } from '@/src/shared/constants/typography'

export interface NativeSectionProps {
  title?: string
  children: React.ReactNode
}

export function NativeSection(props: NativeSectionProps) {
  const { title, children } = props
  return (
    <View style={styles.container}>
      {title ? (
        <Text style={styles.header}>{title.toUpperCase()}</Text>
      ) : null}
      <View style={styles.content}>
        {children}
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    marginTop: SPACING[5],
  },
  header: {
    fontSize: 13,
    fontFamily: FONT_FAMILY.SANS_SEMIBOLD,
    color: TEXT.TERTIARY,
    letterSpacing: 0.06,
    textTransform: 'uppercase',
    paddingHorizontal: LAYOUT.SCREEN_PADDING,
    marginBottom: SPACING[2],
  },
  content: {
    backgroundColor: NAVY[800],
    borderRadius: RADIUS.XL,
    overflow: 'hidden',
  },
})
