biblical-guide.com/components/bible/sync-status-indicator.tsx

'use client'
import { Box, Chip, CircularProgress, Tooltip, Typography } from '@mui/material'
import CloudSyncIcon from '@mui/icons-material/CloudSync'
import CheckCircleIcon from '@mui/icons-material/CheckCircle'
import ErrorIcon from '@mui/icons-material/Error'
import ScheduleIcon from '@mui/icons-material/Schedule'

interface SyncStatusIndicatorProps {
  status: 'synced' | 'syncing' | 'pending' | 'error'
  pendingCount?: number
  errorMessage?: string
}

export function SyncStatusIndicator({
  status,
  pendingCount = 0,
  errorMessage
}: SyncStatusIndicatorProps) {
  if (status === 'synced') {
    return (
      <Tooltip title="All changes synced">
        <Chip
          data-testid="sync-status-synced"
          icon={<CheckCircleIcon sx={{ color: 'success.main' }} />}
          label="Synced"
          variant="outlined"
          color="success"
          size="small"
          sx={{ fontWeight: 500 }}
        />
      </Tooltip>
    )
  }

  if (status === 'syncing') {
    return (
      <Tooltip title="Syncing with server">
        <Chip
          data-testid="sync-status-syncing"
          icon={<CircularProgress size={16} />}
          label="Syncing..."
          variant="filled"
          color="primary"
          size="small"
          sx={{ fontWeight: 500 }}
        />
      </Tooltip>
    )
  }

  if (status === 'pending') {
    return (
      <Tooltip title={`${pendingCount} highlights waiting to sync`}>
        <Chip
          data-testid="sync-status-pending"
          icon={<ScheduleIcon sx={{ color: 'warning.main' }} />}
          label={`${pendingCount} pending`}
          variant="outlined"
          color="warning"
          size="small"
          sx={{ fontWeight: 500 }}
        />
      </Tooltip>
    )
  }

  // error
  return (
    <Tooltip title={errorMessage || 'Sync failed'}>
      <Box data-testid="sync-status-error" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        <ErrorIcon sx={{ color: 'error.main', fontSize: 20 }} />
        <Box>
          <Typography variant="caption" color="error" sx={{ fontWeight: 600 }}>
            Sync Error
          </Typography>
          {errorMessage && (
            <Typography variant="caption" color="error" sx={{ display: 'block' }}>
              {errorMessage}
            </Typography>
          )}
        </Box>
      </Box>
    </Tooltip>
  )
}