import React, { useEffect } from 'react';
import { RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useNavigate } from "react-router-dom";
import useNotifications from '@/hooks/useNotifications';

interface SyncStatusProps {
  enabled: boolean;
  syncing: boolean;
  lastSync: string;
  user: any; // User 타입 또는 null
  onManualSync: () => Promise<void>;
}

const SyncStatus: React.FC<SyncStatusProps> = ({
  enabled,
  syncing,
  lastSync,
  user,
  onManualSync
}) => {
  const navigate = useNavigate();
  const { addNotification } = useNotifications();

  // 동기화 버튼 클릭 시 알림 추가
  const handleSyncClick = async () => {
    if (syncing) return;
    
    try {
      await onManualSync();
    } catch (error) {
      console.error('수동 동기화 실패:', error);
    }
  };

  if (!enabled) return null;

  return (
    <div className="space-y-3">
      {user ? (
        <div className="flex justify-between items-center text-sm">
          <span className="text-muted-foreground">마지막 동기화: {lastSync}</span>
          <button 
            onClick={handleSyncClick}
            disabled={syncing}
            className="neuro-button py-1 px-3 flex items-center gap-1 bg-neuro-income text-white hover:bg-neuro-income/90"
          >
            <RefreshCw className={`h-4 w-4 ${syncing ? 'animate-spin' : ''}`} />
            <span>{syncing ? '동기화 중...' : '지금 동기화'}</span>
          </button>
        </div>
      ) : (
        <div className="flex justify-between items-center">
          <span className="text-sm text-muted-foreground">로그인이 필요합니다</span>
          <Button 
            onClick={() => navigate('/login')}
            size="sm"
            className="py-1 px-3 bg-neuro-income text-white hover:bg-neuro-income/90"
          >
            로그인하여 동기화
          </Button>
        </div>
      )}
    </div>
  );
};

export default SyncStatus;