import { Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { useColors } from '../../lib/theme';

export type DeviceStatusKind = 'online' | 'cooldown' | 'unprotected' | 'pending';

/**
 * Status-Zeile in der Geräte-Liste: farbiger Punkt + Text.
 * - online       → geschützt/verbunden (grün)
 * - cooldown     → Pause beantragt, läuft ab (amber, mit Restdauer)
 * - unprotected  → Schutz aus (rot, mit Dauer)
 * - pending      → wartet auf Aktivierung (amber)
 */
export function DeviceStatusPill({
  kind,
  durationText,
}: {
  kind: DeviceStatusKind;
  durationText?: string;
}) {
  const { t } = useTranslation();
  const colors = useColors();

  const cfg: Record<DeviceStatusKind, { color: string; label: string }> = {
    online: { color: colors.success, label: t('devices.status_online') },
    cooldown: {
      color: '#f59e0b',
      label: durationText
        ? t('devices.status_cooldown', { time: durationText })
        : t('devices.status_cooldown_short'),
    },
    unprotected: {
      color: colors.error,
      label: durationText
        ? t('devices.status_unprotected_since', { time: durationText })
        : t('devices.status_unprotected'),
    },
    pending: { color: '#f59e0b', label: t('devices.status_pending') },
  };
  const c = cfg[kind];

  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 3 }}>
      <View style={{ width: 7, height: 7, borderRadius: 4, backgroundColor: c.color }} />
      <Text
        numberOfLines={1}
        style={{ fontSize: 12, color: c.color, fontFamily: 'Nunito_600SemiBold', flexShrink: 1 }}
      >
        {c.label}
      </Text>
    </View>
  );
}