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'

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

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

const styles = StyleSheet.create({
  container: {
    marginTop: SPACING[5],
  },
  header: {
    fontSize: 13,
    fontWeight: '400',
    color: TEXT.TERTIARY,
    letterSpacing: -0.08,
    textTransform: 'uppercase',
    paddingHorizontal: LAYOUT.SCREEN_PADDING + LAYOUT.CARD_PADDING,
    marginBottom: SPACING[2],
  },
  content: {
    marginHorizontal: LAYOUT.SCREEN_PADDING,
    backgroundColor: NAVY[800],
    borderRadius: RADIUS.LG,
    overflow: 'hidden',
  },
  footer: {
    fontSize: 13,
    fontWeight: '400',
    color: TEXT.TERTIARY,
    letterSpacing: -0.08,
    paddingHorizontal: LAYOUT.SCREEN_PADDING + LAYOUT.CARD_PADDING,
    marginTop: SPACING[2],
    lineHeight: 18,
  },
})
