import React from "react";
import { RefreshCcw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

interface ServerStatusAlertProps {
  serverStatus: {
    checked: boolean;
    connected: boolean;
    message: string;
  };
  checkServerConnection: () => Promise<void>;
}

const ServerStatusAlert: React.FC<ServerStatusAlertProps> = ({
  serverStatus,
  checkServerConnection,
}) => {
  if (!serverStatus.checked || serverStatus.connected) {
    return null;
  }

  return (
    <Alert variant="destructive" className="mb-6">
      <AlertTitle className="flex items-center">
        서버 연결 문제
        <Button 
          variant="ghost" 
          size="sm" 
          className="ml-2 h-6 w-6 p-0" 
          onClick={checkServerConnection}
        >
          <RefreshCcw className="h-4 w-4" />
        </Button>
      </AlertTitle>
      <AlertDescription>
        {serverStatus.message}
        <p className="mt-1 text-xs">회원가입을 시도하기 전에 서버 연결 문제를 해결해주세요.</p>
      </AlertDescription>
    </Alert>
  );
};

export default ServerStatusAlert;