/**
 * 问题数量差异显示组件
 * 用于显示文档版本之间的问题数量对比
 */

interface IssuesDiffProps {
  currentIssues: number | null;
  previousIssues?: number | null;
  issuesDiff?: number;
  issuesDiffType?: 'increase' | 'decrease' | 'same';
  className?: string;
}

export function IssuesDiff({
  currentIssues,
  previousIssues,
  issuesDiff,
  issuesDiffType,
  className = ''
}: IssuesDiffProps) {
  // 如果当前问题数量为 null，显示 "-"
  if (currentIssues === null) {
    return <span className={`issues-number ${className}`}>-</span>;
  }

  // 如果没有上一个版本或上一个版本问题数量为 null，只显示当前数量
  if (previousIssues === null || previousIssues === undefined || issuesDiffType === undefined) {
    return <span className={`issues-number ${className}`}>{currentIssues}</span>;
  }

  // 显示当前数量 + 差异
  return (
    <div className={`issues-count-wrapper ${className}`}>
      <span className="issues-number">{currentIssues}</span>
      {issuesDiff !== undefined && issuesDiffType && (
        <span className={`issues-diff ${issuesDiffType}`}>
          {issuesDiffType === 'increase' && (
            <>
              <i className="ri-arrow-up-line"></i>
              <span>+{issuesDiff}</span>
            </>
          )}
          {issuesDiffType === 'decrease' && (
            <>
              <i className="ri-arrow-down-line"></i>
              <span>-{issuesDiff}</span>
            </>
          )}
          {issuesDiffType === 'same' && (
            <>
              <i className="ri-subtract-line"></i>
              <span>0</span>
            </>
          )}
        </span>
      )}
    </div>
  );
}