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

export function OptionButton({ number, label, description, selected, onClick, onMouseEnter, onFocus }) {
  const selectedStyles = selected 
    ? 'border-starting/60 bg-starting/15 shadow-sm' 
    : 'border-selection/70 bg-surface2/55';
  
  return html`
    <button
      onClick=${onClick}
      onMouseEnter=${onMouseEnter}
      onFocus=${onFocus}
      class="group w-full rounded-lg border px-3 py-2 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 ${selectedStyles}"
    >
      <div class="flex items-baseline gap-2">
        <span class="font-mono text-sm text-starting">${number}.</span>
        <span class="text-sm font-medium text-bright">${label}</span>
      </div>
      ${description && html`
        <p class="mt-0.5 pl-4 text-xs text-dim">${description}</p>
      `}
    </button>
  `;
}