import type { Bar } from '@wutzcalc/shared';

interface Props {
  bars: Bar[] | null;
  onPick: (id: number) => void;
}

export function BarPicker({ bars, onPick }: Props) {
  return (
    <div class="bar-picker">
      <h1>Bar auswählen</h1>
      {bars == null ? (
        <p>Lade…</p>
      ) : (
        bars.map(b => (
          <button key={b.id} onClick={() => onPick(b.id)}>
            {b.name}
          </button>
        ))
      )}
    </div>
  );
}