function pickRandom(list) {
  return list[Math.floor(Math.random() * list.length)]
}

export default function DomainButtons({ categories, onPick }) {
  if (!categories.length) return null

  return (
    <div className="domain-buttons">
      {categories.map((category) => (
        <button
          key={category.id}
          className={`domain-pill domain-pill--${category.id}`}
          title={category.description}
          onClick={() => onPick(pickRandom(category.questions))}
        >
          {category.label}
        </button>
      ))}
    </div>
  )
}