<%# locals: (provider_link:) %>

<%# Assign distinct colors to each provider %>
<% provider_colors = {
  "Lunch Flow" => "#6471eb",
  "Plaid" => "#4da568",
  "SimpleFin" => "#e99537",
  "Enable Banking" => "#6471eb",
  "CoinStats" => "#FF9332" # https://coinstats.app/press-kit/
} %>
<% provider_color = provider_colors[provider_link[:name]] || "#6B7280" %>

<%= link_to provider_link[:path],
            target: provider_link[:target],
            rel: provider_link[:rel],
            class: "flex justify-between items-center p-4 bg-container hover:bg-container-hover transition-colors" do %>
  <div class="flex w-full items-center gap-2.5">
    <%= render partial: "shared/color_avatar", locals: { name: provider_link[:name], color: provider_color } %>

    <div class="flex flex-col">
      <p class="text-primary text-sm font-medium">
        <%= provider_link[:name] %>
      </p>
      <p class="text-secondary text-xs">
        <%= provider_link[:description] %>
      </p>
    </div>
  </div>
  <div class="justify-self-end">
    <%= icon("arrow-right", size: "sm", class: "text-secondary") %>
  </div>
<% end %>
