import React from 'react';
import { Button, Modal } from 'antd';
import { LogoutOutlined } from '@ant-design/icons';
import { clearAuthInfo, getUserInfo } from '../utils/auth';

const LogoutButton = ({ style = {}, onLogout = null }) => {
  const userInfo = getUserInfo();

  const handleLogout = () => {
    Modal.confirm({
      title: '确认退出',
      content: '您确定要退出登录吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        // 清除认证信息，但保留记住的登录信息
        clearAuthInfo(false);
        
        // 执行回调函数
        if (onLogout) {
          onLogout();
        } else {
          // 默认跳转到登录页
          window.location.href = '/';
        }
      }
    });
  };

  const handleCompleteLogout = () => {
    Modal.confirm({
      title: '完全退出',
      content: '这将清除所有保存的登录信息，包括"记住我"的设置。确定要继续吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        // 清除所有认证信息，包括记住的登录信息
        clearAuthInfo(true);
        
        // 执行回调函数
        if (onLogout) {
          onLogout();
        } else {
          // 默认跳转到登录页
          window.location.href = '/';
        }
      }
    });
  };

  if (!userInfo) {
    return null;
  }

  return (
    <div style={style}>
      <Button 
        type="default" 
        icon={<LogoutOutlined />}
        onClick={handleLogout}
        style={{ marginRight: 8 }}
      >
        退出登录
      </Button>
      <Button 
        type="link" 
        size="small"
        onClick={handleCompleteLogout}
        style={{ color: '#ff4d4f' }}
      >
        完全退出
      </Button>
    </div>
  );
};

export default LogoutButton;