import React from 'react';
import { Box } from './Box';
import { Text } from './Text';
import { Link } from './Link';
import { routes } from '@/lib/routing/RouteConfig';
import { ChevronDown } from 'lucide-react';
import { Icon } from './Icon';

/**
 * PublicNavLogin is a login button component for public pages.
 * It displays a login button that redirects to the auth login page.
 */
export function PublicNavLogin() {
  return (
    <Link
      href={routes.auth.login}
      variant="inherit"
      data-testid="public-nav-login"
      className="group flex items-center gap-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-full pl-4 pr-2 py-1.5 transition-all duration-300 hover:border-primary-accent/50"
    >
      <Text size="sm" weight="medium" className="text-text-med group-hover:text-text-high">
        Login
      </Text>
      <Box className="w-6 h-6 rounded-full bg-primary-accent flex items-center justify-center text-white shadow-lg shadow-primary-accent/20 group-hover:scale-110 transition-transform">
        <Icon icon={ChevronDown} size={3.5} className="-rotate-90" />
      </Box>
    </Link>
  );
}