import React from 'react';
import { HelpCircle } from "lucide-react";
import { TestResults } from '@/lib/supabase/tests/types';

interface TroubleshootingTipsProps {
  testResults: TestResults;
}

const TroubleshootingTips: React.FC<TroubleshootingTipsProps> = ({ testResults }) => {
  if (!(!testResults.restApi && testResults.auth)) {return null;}
  
  return (
    <div className="bg-yellow-50 border border-yellow-200 rounded p-2 mt-2">
      <div className="flex items-start gap-1">
        <HelpCircle className="h-4 w-4 text-yellow-600 mt-0.5 flex-shrink-0" />
        <div>
          <p className="text-xs text-yellow-800 font-medium">인증은 성공했지만 API/DB 연결에 실패했습니다</p>
          <ul className="list-disc text-xs text-yellow-700 pl-4 mt-1">
            <li>다른 CORS 프록시 옵션을 시도해보세요</li>
            <li>Supabase 서버의 CORS 설정을 확인하세요</li>
            <li>브라우저 개발자 도구에서 네트워크 탭을 확인하세요</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default TroubleshootingTips;