import { View } from 'react-native';

import { Badge } from '../../atoms/Badge';
import type { IconName } from '../../atoms/Icon';
import { Icon } from '../../atoms/Icon';
import { Text } from '../../atoms/Text';
import { cn } from '../../lib/cn';

import type { SyncStatus, SyncStatusBadgeProps } from './SyncStatusBadge.types';

const config: Record<
  SyncStatus,
  { label: string; tone: 'success' | 'warning' | 'danger' | 'muted' | 'default'; icon: IconName }
> = {
  pending: { label: 'Pendiente', tone: 'warning', icon: 'refresh' },
  syncing: { label: 'Sincronizando', tone: 'default', icon: 'refresh' },
  synced: { label: 'Sincronizado', tone: 'success', icon: 'check' },
  error: { label: 'Error', tone: 'danger', icon: 'alert' },
  offline: { label: 'Sin conexión', tone: 'muted', icon: 'info' },
};

export function SyncStatusBadge({ status, label, className }: SyncStatusBadgeProps) {
  const c = config[status];
  return (
    <Badge tone={c.tone} className={cn('gap-1.5 px-2 py-1', className)}>
      <View className="flex-row items-center gap-1">
        <Icon name={c.icon} size={12} />
        <Text variant="caption" className="text-current">
          {label ?? c.label}
        </Text>
      </View>
    </Badge>
  );
}