import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
import { NavLink } from "react-router";
import type { Server } from "~/lib/api/types";
import { cn, getFirstLetters } from "~/lib/utils";
import { Button } from "../ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";

export interface ServerButtonProps {
    server: Server;
}

export function ServerButton({ server }: ServerButtonProps) {
    return (
        <NavLink to={`/app/server/${server.id}`}>
            {({ isActive }) => (
                <Tooltip disableHoverableContent>
                    <TooltipTrigger asChild>
                        <Button
                            variant="outline"
                            size="none"
                            className={cn("overflow-hidden", isActive ? "bg-accent" : "")}
                        >
                            <div className="flex items-center justify-center size-12">
                                <Avatar className="rounded-none">
                                    <AvatarImage src={server.iconUrl} className="rounded-none" />
                                    <AvatarFallback>{getFirstLetters(server.name, 4)}</AvatarFallback>
                                </Avatar>
                            </div>
                        </Button>
                    </TooltipTrigger>
                    <TooltipContent side="right">
                        <p className="text-xs">{server.name}</p>
                    </TooltipContent>
                </Tooltip>
            )}
        </NavLink>
    );
}