import * as React from 'react'
import { Ic, type IconName } from '@/icons'
import { cn } from '@/lib/utils'

type IconButtonProps = React.ComponentProps<'button'> & { icon?: IconName }

/* دکمهٔ گرد آیکونی با حاشیهٔ نرم — اکشن‌های دایره‌ای Topbar و … */
export function IconButton({ icon, className, children, ...props }: IconButtonProps) {
  return (
    <button
      className={cn(
        'relative flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border-soft bg-white/5 text-grey-2 transition-colors hover:bg-white/8 [&_svg]:size-[17px]',
        className,
      )}
      {...props}
    >
      {icon && <Ic name={icon} />}
      {children}
    </button>
  )
}