1  'use client'
 2  
 3  import type { ButtonHTMLAttributes, ReactNode } from 'react'
 4  import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 5  
 6  interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
 7    children: ReactNode
 8    variant?: 'default' | 'accent' | 'danger'
 9    active?: boolean
10    size?: 'sm' | 'md'
11    tooltip?: string
12  }
13  
14  export function IconButton({ children, variant = 'default', active, size = 'md', className = '', tooltip, ...props }: Props) {
15    const sizeClass = size === 'sm' ? 'w-8 h-8 rounded-[9px]' : 'w-9 h-9 rounded-[10px]'
16    const base = `${sizeClass} border-none bg-transparent flex items-center justify-center cursor-pointer shrink-0 transition-all duration-200 hover:bg-white/[0.06] active:scale-90`
17    const color =
18      variant === 'accent' ? 'text-accent-bright' :
19      variant === 'danger' ? 'text-danger' :
20      active ? 'text-accent-bright bg-accent-soft' : 'text-text-3 hover:text-text-2'
21  
22    const btn = (
23      <button className={`${base} ${color} ${className}`} {...props}>
24        {children}
25      </button>
26    )
27  
28    if (!tooltip) return btn
29  
30    return (
31      <Tooltip>
32        <TooltipTrigger asChild>{btn}</TooltipTrigger>
33        <TooltipContent side="bottom" sideOffset={6}
34          className="bg-raised border border-white/[0.08] text-text shadow-[0_8px_32px_rgba(0,0,0,0.5)] rounded-[8px] px-2.5 py-1.5 text-[11px]">
35          {tooltip}
36        </TooltipContent>
37      </Tooltip>
38    )
39  }