"use client"

import * as React from "react"

import { Button } from "./ui/button"
import { cn } from '../lib/utils'
import { icons } from "../lib/icons"

import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from "./ui/tooltip"

export function NavButton({ selected, variant, tooltip }) {
    return (
        <TooltipProvider>
            <Tooltip>
                <TooltipTrigger>
                    <Button id={`${variant}Btn`} variant="outline" size="icon" className={cn("bg-inherit border-none text-content", selected ? "text-accent hover:text-bkg" : "text-content hover:text-bkg")} dangerouslySetInnerHTML={{ __html: icons[variant] }} />
                </TooltipTrigger>
                <TooltipContent>
                    <p>{tooltip}</p>
                </TooltipContent>
            </Tooltip>
        </TooltipProvider>

    )
}
