import React from 'react'
import styles from './ModalDestinationButton.module.css'

interface Props {
  icon: React.ReactNode
  label: string
  onClick: () => void
  badge?: React.ReactNode
  className?: string
  title?: string
}

const ModalDestinationButton: React.FC<Props> = ({ 
  icon, 
  label, 
  onClick, 
  badge,
  className = '',
  title
}) => {
  return (
    <button 
      type="button"
      onClick={onClick}
      className={`${styles.button} ${className}`}
      title={title}
    >
      <div className={styles.iconContainer}>
        {icon}
        {badge && <div className={styles.badge}>{badge}</div>}
      </div>
      <span className={styles.label}>{label}</span>
    </button>
  )
}

export default ModalDestinationButton