import { html } from '../lib/preact.js';

export function OptionButton({ number, label, description, onClick }) {
  return html`
    <button
      onClick=${onClick}
      class="group w-full rounded-xl border border-selection/70 bg-surface2/55 p-3.5 text-left transition-[transform,border-color,background-color,box-shadow] duration-200 hover:-translate-y-0.5 hover:border-starting/55 hover:bg-surface2/90 hover:shadow-halo"
    >
      <div class="flex items-baseline gap-2.5">
        <span class="font-mono text-starting">${number}.</span>
        <span class="font-medium text-bright">${label}</span>
      </div>
      ${description && html`
        <p class="mt-1 pl-5 text-sm text-dim">${description}</p>
      `}
    </button>
  `;
}