import {LucideIcon} from 'lucide-react'

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

import {Button} from './button'

export function IconButton({
  onClick,
  filled = false,
  size = 'default',
  Icon,
  buttonStyles,
  iconStyles,
}: {
  onClick?: () => void
  filled?: boolean
  size?: 'default' | 'sm' | 'lg'
  Icon: LucideIcon
  buttonStyles?: string
  iconStyles?: string
}) {
  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>
  )
}
