import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Colors, Fonts, FontSize, BorderRadius } from '@/constants/theme';
import PulsingDot from '@/components/PulsingDot';

export default function StatusBanner() {
  return (
    <View style={styles.container}>
      <View style={styles.badge}>
        <PulsingDot size={6} />
        <Text style={styles.runningText}>RUNNING</Text>
      </View>
      <View style={[styles.badge, styles.paperBadge]}>
        <Text style={styles.paperText}>PAPER</Text>
      </View>
      <Text style={styles.uptime}>4d 12h 33m</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: Colors.background.card,
    borderRadius: BorderRadius.small,
    padding: 12,
    paddingHorizontal: 16,
    gap: 10,
    borderWidth: 1,
    borderColor: Colors.border.default,
  },
  badge: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    backgroundColor: 'rgba(0,255,136,0.15)',
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 6,
  },
  runningText: {
    fontFamily: Fonts.inter.black,
    fontSize: FontSize.micro,
    color: Colors.accent.green,
    letterSpacing: 1,
  },
  paperBadge: {
    backgroundColor: 'rgba(52,152,219,0.15)',
  },
  paperText: {
    fontFamily: Fonts.inter.black,
    fontSize: FontSize.micro,
    color: Colors.accent.blue,
    letterSpacing: 1,
  },
  uptime: {
    fontFamily: Fonts.mono.regular,
    fontSize: FontSize.bodySmall,
    color: Colors.text.secondary,
    marginLeft: 'auto',
  },
});