import { Tag } from '@douyinfe/semi-ui';
import type { ComponentProps } from 'react';
import { protocolDisplayLabel } from '../domain/protocols';

const PROTOCOL_COLORS: Record<string, ComponentProps<typeof Tag>['color']> = {
  GB32960: 'blue',
  JT808: 'cyan',
  YUTONG_MQTT: 'violet'
};

export function ProtocolTag({
  protocol,
  className = '',
  compact = false,
  unknownLabel = '未知来源'
}: {
  protocol?: string;
  className?: string;
  compact?: boolean;
  unknownLabel?: string;
}) {
  const normalized = protocol?.trim() ?? '';
  const classes = ['v2-protocol-tag', compact ? 'is-compact' : '', className].filter(Boolean).join(' ');
  const label = normalized ? protocolDisplayLabel(normalized) : unknownLabel;

  return <Tag
    className={classes}
    color={PROTOCOL_COLORS[normalized] ?? 'grey'}
    type="light"
    size="small"
  >
    {label}
  </Tag>;
}
