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

/**
 * 认证页面底部组件
 * 包含页面切换链接和登录方式切换链接
 */
export default function AuthFooter({
    // 左侧链接配置
    linkText,           // 提示文本，如 "还没有账号，" 或 "已有账号？"
    linkLabel,          // 链接文本，如 "去注册" 或 "去登录"
    linkTo,             // 链接路径，如 "/auth/sign-up" 或 "/auth/sign-in"

    // 右侧切换配置
    useVerificationCode,     // 当前是否使用验证码登录
    onSwitchMethod          // 切换登录方式的回调函数
}) {
    return (
        <HStack justify="space-between" width="100%">
            {/* 左侧：页面切换链接（去注册/去登录） */}
            <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>

            {/* 右侧：登录方式切换链接 */}
            <ChakraLink
                href="#"
                fontSize="sm"
                color="blue.500"
                fontWeight="bold"
                onClick={(e) => {
                    e.preventDefault();
                    onSwitchMethod();
                }}
            >
                {useVerificationCode ? '密码登陆' : '验证码登陆'}
            </ChakraLink>
        </HStack>
    );
}