<script>
  let { item, isSelected = false, onclick } = $props();
</script>

<button
  type="button"
  class="w-full text-left px-3 py-2 text-sm hover:bg-gray-100 {isSelected ? 'bg-gray-100' : ''}"
  {onclick}
>
  <div>{item.nombre} {item.sigla ? `(${item.sigla})` : ''}</div>
  <div class="text-xs text-gray-500">{item.contexto}</div>
</button>