// packages/ui-native/src/components/StatusBar.tsx
// RN StatusBar — bottom status strip with LED + model label

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

export interface AppStatusBarProps {
  model?: string
  label?: string
  style?: StyleProp<ViewStyle>
}

export function AppStatusBar({
  model = 'CLOUD CLAUDE',
  label = 'PRECISION DATA LINK',
  style
}: AppStatusBarProps): React.ReactElement {
  const containerStyle: ViewStyle = {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 8,
    paddingHorizontal: 16,
    gap: 8,
    opacity: 0.5
  }

  return (
    <View style={[containerStyle, style]}>
      <Led color="green" size={5} />
      <PhosphorText
        variant="label"
        color="muted"
        style={{ fontFamily: d3roNativeFonts.mono, fontSize: 8, letterSpacing: 1.5 }}
      >
        {model}
      </PhosphorText>
      <View style={{ width: 1, height: 8, backgroundColor: d3roNativePalette.border.default }} />
      <PhosphorText
        variant="label"
        color="muted"
        style={{ fontFamily: d3roNativeFonts.mono, fontSize: 8, letterSpacing: 1.5 }}
      >
        {label}
      </PhosphorText>
    </View>
  )
}