'use client'

import { hoverTipBelowClass } from '@/lib/ui/hoverTipClass'

export default function DesktopActionPill({
    title,
    onClick,
    icon,
    children,
}: {
    title: string
    onClick?: () => void
    icon: React.ReactNode
    children: React.ReactNode
}) {
    return (
        <button
            type="button"
            onClick={onClick}
            tip={title}
            aria-label={title}
            className={
                'inline-flex items-center min-w-[48px] h-9 px-3 rounded-[10px] border-0 bg-[#f2f2f2] dark:bg-white/[0.12] select-none leading-none transition-colors hover:bg-[#e5e5e5] dark:hover:bg-white/[0.18] active:bg-[#d9d9d9] dark:active:bg-white/20 ' +
                hoverTipBelowClass
            }
        >
            <span className="inline-flex items-center gap-1.5 text-sm font-medium text-[#0f0f0f] dark:text-[#f1f1f1] whitespace-nowrap leading-none">
                <span className="inline-flex items-center justify-center w-6 h-6">{icon}</span>
                {children}
            </span>
        </button>
    )
}