import type { Service } from '../data/services'
import styles from './ServiceCard.module.css'

interface ServiceCardProps {
  service: Service
  onSelect?: (serviceId: string) => void
}

function formatDuration(minutes: number): string {
  const hours = Math.floor(minutes / 60)
  const rest = minutes % 60
  return rest === 0 ? `${hours}h` : `${hours}h ${rest}m`
}

function ServiceCard({ service, onSelect }: ServiceCardProps) {
  return (
    <button type="button" className={styles.card} onClick={() => onSelect?.(service.id)}>
      <h3>{service.name}</h3>
      <p>{formatDuration(service.durationMinutes)}</p>
      <p>From ${service.priceFrom}</p>
    </button>
  )
}

export default ServiceCard