import {LucideIcon} from 'lucide-react'

import {cn} from '../../lib/utils'

import {Button} from './button'

/**
 * A button component that displays an icon in various sizes.
 * @publicDocs
 */
export interface IconButtonProps {
  /** Click handler */
  onClick?: () => void
  /** Whether the button is in a filled/active state */
  filled?: boolean
  /** Button size variant */
  size?: 'default' | 'sm' | 'lg'
  /** Lucide icon component to render */
  Icon: LucideIcon
  /** Custom CSS classes for the button container */
  buttonStyles?: string
  /** Custom CSS classes for the icon */
  iconStyles?: string
}

export function IconButton({
  onClick,
  filled = false,
  size = 'default',
  Icon,
  buttonStyles,
  iconStyles,
}: IconButtonProps) {
  const sizeMap = {
    sm: 'size-3',
    default: 'size-4',
    lg: 'size-6',
  }

  return (
    <Button
      onClick={onClick}
      variant="icon"
      size={size}
      className={cn(buttonStyles)}
      stopPropagation
    >
      <Icon
        fill={filled ? 'currentColor' : 'none'}
        className={cn('text-primary-foreground', sizeMap[size], iconStyles)}
      />
    </Button>
  )
}