import React from 'react';
import { Alert, Button, Space } from 'antd';
import { ReloadOutlined } from '@ant-design/icons';

const OfflineMode = ({ onRetry }) => {
  return (
    <Alert
      message="Offline Mode"
      description={
        <div>
          <p>The frontend is running in offline mode because backend services are not available.</p>
          <p>To enable full functionality:</p>
          <ol style={{ margin: '8px 0', paddingLeft: '20px' }}>
            <li>Start the backend services: <code>docker-compose up -d</code></li>
            <li>Or start individual services for development</li>
            <li>Refresh this page once services are running</li>
          </ol>
          <Space style={{ marginTop: 12 }}>
            <Button 
              type="primary" 
              icon={<ReloadOutlined />}
              onClick={onRetry}
            >
              Retry Connection
            </Button>
            <Button 
              onClick={() => window.open('http://localhost:8083', '_blank')}
            >
              Check API Documentation
            </Button>
          </Space>
        </div>
      }
      type="info"
      showIcon
      style={{ marginBottom: 16 }}
    />
  );
};

export default OfflineMode;