import { StyleSheet, Text, View } from 'react-native';
import { SERVICE_COLORS, SERVICE_LABELS, type NowPlayingProvider, type StreamingService } from '@musicshare/shared';
import { colors, fonts } from '@/lib/theme';

/** A service's name with a badge in its brand colour, so it's easy to spot in a list. */
export function ServiceName({ service }: { service: StreamingService | NowPlayingProvider }) {
  const label = SERVICE_LABELS[service];
  return (
    <View style={styles.row}>
      <View style={[styles.badge, { backgroundColor: SERVICE_COLORS[service] }]}>
        <Text style={styles.letter}>{label.slice(0, 1).toUpperCase()}</Text>
      </View>
      <Text style={styles.name}>{label}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 2 },
  badge: {
    width: 28,
    height: 28,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(255,255,255,0.25)',
  },
  letter: { color: '#fff', fontFamily: fonts.display, fontSize: 15 },
  name: { color: colors.text, fontFamily: fonts.display, fontSize: 18 },
});