import { Tooltip, Typography } from 'antd';

interface EntityNameProps {
  name?: string | null;
  id?: string;
  fallbackLabel?: string;
}

export function EntityName({ name, id, fallbackLabel = '未知' }: EntityNameProps) {
  if (name !== undefined && name !== null && name !== '') return <span>{name}</span>;

  if (id) {
    return (
      <Tooltip title={`ID: ${id.slice(0, 8)}...`}>
        <Typography.Text type="secondary" style={{ cursor: 'help' }}>
          {fallbackLabel}
        </Typography.Text>
      </Tooltip>
    );
  }

  return <Typography.Text type="secondary">{fallbackLabel}</Typography.Text>;
}