import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar"
import { NavLink } from "react-router"
import type { Server } from "~/lib/api/types"
import { 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" asChild className={
                        isActive ? "bg-accent" : ""
                    }>
                        <div>
                            <Avatar className="size-12 rounded-none flex items-center justify-center">
                                <AvatarImage src={server.iconUrl} className="rounded-none" />
                                <AvatarFallback>
                                    <div>
                                        {getFirstLetters(server.name, 4)}
                                    </div>
                                </AvatarFallback>
                            </Avatar>
                        </div>
                    </Button>
                )
            }
        </NavLink>
    )
}