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

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

const ModalPlatformCard: React.FC<Props> = ({ 
  icon, 
  label, 
  onClick,
  badge,
  className = '' 
}) => {
  return (
    <button 
      type="button"
      onClick={onClick}
      className={`${styles.card} ${className}`}
    >
      {badge && (
        <div className={`${styles.badge} ${styles[badge]}`}>
          {badge === 'pro' && '⭐'}
          {badge === 'new' && '✨'}
        </div>
      )}
      <div className={styles.icon}>{icon}</div>
      <span className={styles.label}>{label}</span>
    </button>
  )
}

export default ModalPlatformCard