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";

export interface ServerButtonProps {
    server: Server;
}

export function ServerButton({ server }: ServerButtonProps) {
    return (
        <NavLink to={`/app/server/${server.id}`}>
            {({ isActive }) => (
                <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>
            )}
        </NavLink>
    );
}