import {Heart} from 'lucide-react'

import {IconButton} from '../atoms/icon-button'

/**
 * A button component for toggling a favorite state, typically used for products.
 * @publicDocs
 */
export interface FavoriteButtonProps {
  /** Click handler for toggling favorite state */
  onClick?: () => void
  /** Whether the product is currently favorited */
  filled?: boolean
}

export function FavoriteButton({onClick, filled = false}: FavoriteButtonProps) {
  return (
    <IconButton
      Icon={Heart}
      filled={filled}
      onClick={onClick}
      buttonStyles={
        filled ? 'bg-primary' : 'bg-button-overlay/30 backdrop-blur-sm'
      }
    />
  )
}