/**
 * OfflineStatusIndicator Component
 *
 * Small badge showing offline status (for use in headers/toolbars).
 */

import React from 'react';
import { mdiCloudCheck, mdiCloudOffOutline, mdiCloudSync } from '@mdi/js';
import Icon from '@mdi/react';
import { useNetworkAware } from '../../hooks/useNetworkAware';
import { usePreloadProgress } from '../../hooks/usePreloadProgress';

interface OfflineStatusIndicatorProps {
  className?: string;
  showLabel?: boolean;
  projectId?: string | null;
}

export function OfflineStatusIndicator({
  className = '',
  showLabel = false,
}: OfflineStatusIndicatorProps) {
  const { networkInfo } = useNetworkAware();
  const { isActive, totalProgress } = usePreloadProgress();

  // Determine status
  let icon = mdiCloudCheck;
  let label = 'Online';
  let colorClass = 'text-green-500';
  let bgClass = 'bg-green-50';

  if (!networkInfo.isOnline) {
    icon = mdiCloudOffOutline;
    label = 'Offline';
    colorClass = 'text-gray-500';
    bgClass = 'bg-gray-100';
  } else if (isActive) {
    icon = mdiCloudSync;
    label = `Syncing ${totalProgress}%`;
    colorClass = 'text-blue-500';
    bgClass = 'bg-blue-50';
  }

  return (
    <div
      className={`flex items-center gap-1.5 px-2 py-1 rounded-full ${bgClass} ${className}`}
      title={label}
    >
      <Icon
        path={icon}
        size={0.6}
        className={`${colorClass} ${isActive ? 'animate-pulse' : ''}`}
      />
      {showLabel && (
        <span className={`text-xs font-medium ${colorClass}`}>{label}</span>
      )}
    </div>
  );
}

export default OfflineStatusIndicator;
