import { LucideLogIn } from "lucide-react";
import { UnderlineIconRouterLink } from "@/components/Animated/UnderlineIconRouterLink";
import { StrandIcon } from "@/components/Icons/Branding/StrandIcon";

export const NavBarUnauthed = () => {
    return (
        <div className="bg-base flex w-full items-center justify-between p-3">
            <div className="flex items-center gap-1">
                <UnderlineIconRouterLink
                    to="/"
                    label="Strand"
                    icon={StrandIcon()}
                    iconClassName="text-text"
                    labelClassName="text-text"
                    underlineClassName="bg-text"
                    className="pl-2 text-lg font-semibold"
                />
            </div>
            <div className="mr-3 flex items-center gap-1">
                <UnderlineIconRouterLink
                    to="/login"
                    label="Sign In"
                    icon={<LucideLogIn height={16} width={16} />}
                    iconClassName="text-crust"
                    labelClassName="text-crust"
                    underlineClassName="bg-crust"
                    className="bg-accent rounded-sm p-1.5 pr-3 pl-3 transition-all hover:bg-accent/90"
                    position="right"
                    iconTransitions={{ duration: 0.2, ease: "easeInOut" }}
                    iconVariants={{
                        active: {
                            x: [0, 10, -10, 0],
                            opacity: [1, 0, 0, 1],
                        },
                    }}
                />
            </div>
        </div>
    );
};