<%# locals: (merchant:) %>

<div class="flex justify-between items-center p-4 bg-container">
  <div class="flex w-full items-center gap-2.5">
    <% if merchant.icon_url %>
      <div class="w-8 h-8 rounded-full flex justify-center items-center">
        <%= image_tag merchant.icon_url, class: "w-8 h-8 rounded-full" %>
      </div>
    <% else %>
      <%= render partial: "shared/color_avatar", locals: { name: merchant.name, color: merchant.color } %>
    <% end %>

    <p class="text-primary text-sm truncate">
      <%= merchant.name %>
    </p>
  </div>
  <div class="justify-self-end">
    <%= render MenuComponent.new do |menu| %>
      <% menu.with_item(variant: "link", text: t(".edit"), href: edit_merchant_path(merchant), icon: "pencil", data: { turbo_frame: "modal" }) %>
      <% menu.with_item(
        variant: "button",
        text: t(".delete"),
        href: merchant_path(merchant),
        icon: "trash-2",
        method: :delete,
        confirm: CustomConfirm.for_resource_deletion(merchant.name)) %>
    <% end %>
  </div>
</div>
