<strong>This component is React-only, see storybook for usage.</strong>

<% itemActions = [
  sage_component(SageButton, {
    value: "Left icon",
    style: "secondary",
    subtle: true,
    icon: {
      style: "only",
      name: "arrow-down"
    },
  }),
  sage_component(SageButton, {
    value: "Left icon",
    style: "secondary",
    subtle: true,
    icon: {
      style: "only",
      name: "pen"
    },
  }),
] %>

<% items = [
  {
    icon: "folder",
    title: "Wonderful Instruments",
    actions: itemActions
  },
  {
    icon: "assessment",
    title: "Dinged Up Dirty Guitar",
    sub_title: "Wonderful Instruments / Ones That Need Love /",
    actions: itemActions
  },
  {
    icon: "video-on",
    title: "Purple & Pink Plastic Violins",
    sub_title: "Wonderful Instruments /",
    actions: itemActions,
  },
  {
    icon: "arrow-corner",
    title: "Greasy Tuba",
    sub_title: "Wonderful Instruments /",
    actions: itemActions,
  },
] %>

<div class="sage-typeahead">
  <%= sage_component SageSearch, {
    placeholder: "Search Products",
    value: nil,
    contained: true,
    label_text: "Search"
  } %>
  <ul class="sage-typeahead__panel">
    <% items.each do |item| %>
      <li class="sage-typeahead__item">
        <button class="sage-typeahead__item-trigger">
          <pds-icon name="<%= item[:icon] %>" class="sage-icon-<%= item[:icon] %>" style="grid-area: icon;"></pds-icon>
          <div class="t-sage-heading-6" style="grid-area: title;">
            <%= item[:title] %>
          </div>
          <div class="t-sage-body-small" style="grid-area: subTitle;">
            <%= item[:sub_title] %>
          </div>
        </button>
        <div class="sage-typeahead__item-actions">
          <% item[:actions].each do |action| %>
            <%= action.html_safe %>
          <% end %>
        </div>
      </li>
    <% end %>
  </ul>
</div>