// packages/ui-native/src/components/Header.tsx
// RN Header — D3RO styled screen header with LEDs
// safe-area insets handled by caller (paddingTop prop or wrapper)

import { View, type ViewStyle, type StyleProp } from 'react-native'
import { Led } from './Led'
import { PhosphorText } from './PhosphorText'
import { d3roNativePalette } from '../theme'

export interface HeaderProps {
  title: string
  showBorder?: boolean
  rightContent?: React.ReactNode
  paddingTop?: number
  style?: StyleProp<ViewStyle>
}

export function Header({
  title,
  showBorder = true,
  rightContent,
  paddingTop = 0,
  style
}: HeaderProps): React.ReactElement {
  return (
    <View
      style={[
        {
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          paddingHorizontal: 20,
          paddingTop: paddingTop + 8,
          paddingBottom: 12,
          borderBottomWidth: showBorder ? 1 : 0,
          borderBottomColor: d3roNativePalette.border.subtle
        },
        style
      ]}
    >
      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
        <Led color="amber" size={8} />
        <PhosphorText variant="label" color="muted" style={{ letterSpacing: 3 }}>
          {title}
        </PhosphorText>
      </View>
      {rightContent ?? (
        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
          <Led color="green" size={6} />
          <Led color="amber" size={6} />
        </View>
      )}
    </View>
  )
}