import { routes } from '@/lib/routing/RouteConfig';
import { Button } from '@/ui/Button';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';

interface HeaderActionsProps {
  isAuthenticated: boolean;
}

export function HeaderActions({ isAuthenticated }: HeaderActionsProps) {
  if (isAuthenticated) {
    return (
      <Button
        as="a"
        href={routes.protected.profile}
        variant="ghost"
        size="sm"
        className="text-text-med hover:text-text-high transition-colors duration-200"
      >
        Profile
      </Button>
    );
  }

  return (
    <Stack direction="row" gap={4} align="center">
      <Button
        as="a"
        href={routes.auth.login}
        variant="ghost"
        size="sm"
        data-testid="public-nav-login"
        className="text-text-med hover:text-text-high transition-colors duration-200"
      >
        Sign In
      </Button>

      <Box className="w-px h-4 bg-outline-steel" />

      <Button
        as="a"
        href={routes.auth.signup}
        variant="primary"
        size="sm"
        data-testid="public-nav-signup"
        className="px-6 font-medium tracking-wide"
      >
        Sign Up
      </Button>
    </Stack>
  );
}