/*
 * 혼잡도 필 — 여유(FREE)/보통(NORMAL)/혼잡(BUSY) 3단계.
 * 색 + 텍스트 병기(WCAG: 색만으로 정보 전달 금지). 점유율(%) 선택 노출.
 */
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import type { CongestionLevel } from '../lib/types';
import { colors, radius, type } from '../theme';

const LEVEL_STYLE: Record<CongestionLevel, { color: string; bg: string }> = {
  FREE: { color: colors.success, bg: '#E7F6EF' },
  NORMAL: { color: colors.warning, bg: '#FFF7ED' },
  BUSY: { color: colors.error, bg: '#FEF3F2' },
};

export function CongestionPill({
  level,
  label,
  percent,
  size = 'md',
}: {
  level: CongestionLevel;
  label: string;
  percent?: number | null;
  size?: 'sm' | 'md';
}) {
  const s = LEVEL_STYLE[level] ?? LEVEL_STYLE.NORMAL;
  const text = percent != null ? `${label} ${percent}%` : label;
  return (
    <View style={[styles.pill, { backgroundColor: s.bg }, size === 'sm' && styles.pillSm]}>
      <View style={[styles.dot, { backgroundColor: s.color }]} />
      <Text style={[styles.text, { color: s.color }, size === 'sm' && styles.textSm]}>{text}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  pill: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 5,
    borderRadius: radius.pill,
    paddingHorizontal: 10,
    paddingVertical: 4,
    alignSelf: 'flex-start',
  },
  pillSm: { paddingHorizontal: 8, paddingVertical: 2 },
  dot: { width: 7, height: 7, borderRadius: 4 },
  text: { fontSize: type.caption.fontSize, fontWeight: '700' },
  textSm: { fontSize: 11 },
});