import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

interface StatusDotProps {
  connected: boolean;
}

export function StatusDot({ connected }: StatusDotProps): React.JSX.Element {
  return (
    <View style={styles.container}>
      <View style={[styles.dot, { backgroundColor: connected ? '#22c55e' : '#ef4444' }]} />
      <Text style={[styles.label, { color: connected ? '#22c55e' : '#ef4444' }]}>
        {connected ? 'Connected' : 'Disconnected'}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
  },
  label: {
    fontSize: 13,
    fontWeight: '500',
  },
});
