import React from 'react';
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { AlertCircle } from "lucide-react";

interface SyncExplanationProps {
  enabled: boolean;
}

const SyncExplanation: React.FC<SyncExplanationProps> = ({ enabled }) => {
  if (!enabled) return null;

  return (
    <Alert className="bg-amber-50 text-amber-800 border-amber-200">
      <AlertCircle className="h-4 w-4" />
      <AlertTitle className="text-black">동기화 작동 방식</AlertTitle>
      <AlertDescription className="text-sm text-black">
        이 기능은 양방향 동기화입니다. 로그인 후 동기화를 켜면 서버 데이터와 로컬 데이터가 병합됩니다.
        데이터 초기화 시 동기화 설정은 자동으로 비활성화됩니다.
      </AlertDescription>
    </Alert>
  );
};

export default SyncExplanation;