import { type ViewStyle, View, StyleSheet } from 'react-native'
import { NAVY } from '@/src/shared/constants/colors'
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'

export interface NativeListProps {
  children: React.ReactNode
  style?: ViewStyle
  scrollEnabled?: boolean
  height?: number
  testID?: string
}

export function NativeList(props: NativeListProps) {
  const { children, style, height } = props
  return (
    <View style={[styles.list, height ? { height } : undefined, style]}>
      {children}
    </View>
  )
}

export function calculateListHeight(rows: number, sections: number = 1): number {
  return rows * LAYOUT.LIST_ROW_HEIGHT + sections * LAYOUT.LIST_HEADER_HEIGHT + 20
}

const styles = StyleSheet.create({
  list: {
    marginHorizontal: LAYOUT.SCREEN_PADDING,
    marginTop: LAYOUT.SECTION_GAP,
    marginBottom: SPACING[3],
    backgroundColor: NAVY[800],
    borderRadius: RADIUS.XL,
    overflow: 'hidden',
  },
})
