'use client';

/**
 * SyncStatusIndicator Component
 *
 * Displays sync status with external issue trackers.
 *
 * @module features/issues/components/SyncStatusIndicator
 */

import { CheckCircle2, RefreshCw, AlertCircle, AlertTriangle } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { SyncStatus } from '../types';
import { SYNC_STATUS_CONFIG } from '../constants';

const SYNC_ICONS = {
  synced: CheckCircle2,
  pending: RefreshCw,
  conflict: AlertTriangle,
  error: AlertCircle,
} as const;

interface SyncStatusIndicatorProps {
  status: SyncStatus;
  className?: string;
  showLabel?: boolean;
}

export function SyncStatusIndicator({
  status,
  className,
  showLabel = false,
}: SyncStatusIndicatorProps) {
  const config = SYNC_STATUS_CONFIG[status] || SYNC_STATUS_CONFIG.synced;
  const Icon = SYNC_ICONS[status] || CheckCircle2;
  const isPending = status === 'pending';

  return (
    <div
      className={cn('flex items-center gap-1', className)}
      title={config.label}
      role="status"
      aria-label={`Sync status: ${config.label}`}
    >
      <Icon
        className={cn('h-3.5 w-3.5', config.color, isPending && 'animate-spin')}
        aria-hidden="true"
      />
      {showLabel && <span className={cn('text-xs', config.color)}>{config.label}</span>}
    </div>
  );
}