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

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

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

  return (
    <Alert variant="destructive" className="mb-6">
      <AlertCircle className="h-4 w-4" />
      <AlertTitle>서버 연결 문제</AlertTitle>
      <AlertDescription className="flex flex-col">
        <span>{serverStatus.message}</span>
        <Button 
          variant="outline" 
          size="sm" 
          className="mt-2 self-start flex items-center gap-1"
          onClick={checkServerConnection}
        >
          <RefreshCw className="h-3 w-3" />
          <span>다시 시도</span>
        </Button>
      </AlertDescription>
    </Alert>
  );
};

export default ServerStatusAlert;