import React from 'react';
import { CheckCircle, XCircle } from 'lucide-react';

interface SupabaseConnectionStatusProps {
  testResults: {
    connected: boolean;
    message: string;
    details?: string;
  } | null;
}

const SupabaseConnectionStatus = ({ testResults }: SupabaseConnectionStatusProps) => {
  if (!testResults) return null;

  return (
    <div className={`mt-2 p-3 rounded-md text-sm ${testResults.connected ? 'bg-green-50' : 'bg-red-50'}`}>
      <div className="flex items-start">
        {testResults.connected ? (
          <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
        ) : (
          <XCircle className="h-5 w-5 text-red-500 mr-2 flex-shrink-0 mt-0.5" />
        )}
        <div>
          <p className={`font-medium ${testResults.connected ? 'text-green-800' : 'text-red-800'}`}>
            {testResults.connected ? '연결됨' : '연결 실패'}
          </p>
          <p className={testResults.connected ? 'text-green-700' : 'text-red-700'}>
            {testResults.message}
          </p>
          {testResults.details && (
            <p className="text-gray-500 mt-1 text-xs">
              {testResults.details}
            </p>
          )}
        </div>
      </div>
    </div>
  );
};

export default SupabaseConnectionStatus;