import React from "react";
import { HStack, Text, Link as ChakraLink } from "@chakra-ui/react";
import { Link } from "react-router-dom";

/**
 * 认证页面底部组件
 * 包含页面切换链接和登录方式切换链接
 *
 * 支持两种模式：
 * 1. 页面模式：使用 linkTo 进行路由跳转
 * 2. 弹窗模式：使用 onClick 进行弹窗切换
 */
export default function AuthFooter({
    // 左侧链接配置
    linkText,           // 提示文本，如 "还没有账号，" 或 "已有账号？"
    linkLabel,          // 链接文本，如 "去注册" 或 "去登录"
    linkTo,             // 链接路径，如 "/auth/sign-up" 或 "/auth/sign-in"（页面模式）
    onClick,            // 点击回调函数（弹窗模式，优先级高于 linkTo）

    // 右侧切换配置
    useVerificationCode,     // 当前是否使用验证码登录
    onSwitchMethod          // 切换登录方式的回调函数
}) {
    return (
        <HStack justify="space-between" width="100%">
            {/* 左侧：页面切换链接（去注册/去登录） */}
            {onClick ? (
                // 弹窗模式：使用 onClick
                <HStack spacing={1} cursor="pointer" onClick={onClick}>
                    <Text fontSize="sm" color="gray.600">{linkText}</Text>
                    <Text fontSize="sm" color="blue.500" fontWeight="bold">{linkLabel}</Text>
                </HStack>
            ) : (
                // 页面模式：使用 Link 组件跳转
                <HStack spacing={1} as={Link} to={linkTo}>
                    <Text fontSize="sm" color="gray.600">{linkText}</Text>
                    <Text fontSize="sm" color="blue.500" fontWeight="bold">{linkLabel}</Text>
                </HStack>
            )}

            {/* 右侧：登录方式切换链接（仅在提供了切换方法时显示） */}
            {onSwitchMethod && (
                <ChakraLink
                    href="#"
                    fontSize="sm"
                    color="blue.500"
                    fontWeight="bold"
                    onClick={(e) => {
                        e.preventDefault();
                        onSwitchMethod();
                    }}
                >
                    {useVerificationCode ? '密码登陆' : '验证码登陆'}
                </ChakraLink>
            )}
        </HStack>
    );
}