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

interface ProxyRecommendationAlertProps {
  errors: string[];
}

const ProxyRecommendationAlert: React.FC<ProxyRecommendationAlertProps> = ({ errors }) => {
  const hasCorsError = errors.some(err => 
    err.includes('CORS') || 
    err.includes('Failed to fetch') ||
    err.includes('프록시 사용시 정상 작동') || 
    err.includes('프록시를 활성화')
  );
  
  if (!hasCorsError || errors.length === 0) return null;
  
  return (
    <Alert className="bg-amber-50 border-amber-200 mt-3">
      <AlertCircle className="h-4 w-4 text-amber-600" />
      <AlertTitle className="text-amber-800 text-xs font-medium">CORS 오류 감지됨</AlertTitle>
      <AlertDescription className="text-amber-700 text-xs">
        <p>HTTP URL에 대한 브라우저 보안 제한으로 인해 연결에 실패했습니다.</p>
        <ul className="list-disc pl-4 mt-1">
          <li className="mt-1">CORS 프록시를 활성화하고 프록시 유형을 변경해보세요.</li>
          <li className="mt-1">또는 HTTPS URL로 변경하는 것을 고려하세요.</li>
        </ul>
      </AlertDescription>
    </Alert>
  );
};

export default ProxyRecommendationAlert;
