<%
  user = local_assigns[:user] || current_user
  streak_count = local_assigns[:streak_count] || user&.streak_days_formatted
  use_turbo_frame = local_assigns.fetch(:turbo_frame, true)
  icon_size = local_assigns[:icon_size] || 24
  show_super_class = local_assigns.fetch(:show_super_class, false)
  show_text = local_assigns.fetch(:show_text, false)
  c = streak_count.to_i
  if c >= 30
    bg = "from-blue-900/20 to-indigo-900/20"
    hbg = "hover:from-blue-800/30 hover:to-indigo-800/30"
    bc = "border-blue-700"
    ic = "text-blue-400 group-hover:text-blue-300"
    tc = "text-blue-300 group-hover:text-blue-200"
    tm = "text-blue-400"
  elsif c >= 7
    bg = "from-red-900/20 to-orange-900/20"
    hbg = "hover:from-red-800/30 hover:to-orange-800/30"
    bc = "border-red-700"
    ic = "text-red-400 group-hover:text-red-300"
    tc = "text-red-300 group-hover:text-red-200"
    tm = "text-red-400"
  else
    bg = "from-orange-900/20 to-yellow-900/20"
    hbg = "hover:from-orange-800/30 hover:to-yellow-800/30"
    bc = "border-orange-700"
    ic = "text-orange-400 group-hover:text-orange-300"
    tc = "text-orange-300 group-hover:text-orange-200"
    tm = "text-orange-400"
  end
%>

<% content = capture do %>
  <% if streak_count && streak_count.to_i > 0 %>
    <div class="inline-flex items-center gap-1 px-2 py-1 bg-gradient-to-r <%= bg %> border <%= bc %> rounded-lg transition-all duration-200 <%= hbg %> group <%= 'super' if show_super_class %>"
         title="<%= streak_count.to_i > 30 ? '30+ daily streak' : "#{streak_count} day streak" %>">

      <svg xmlns="http://www.w3.org/2000/svg"
           width="<%= icon_size %>"
           height="<%= icon_size %>"
           viewBox="0 0 24 24"
           class="<%= ic %> transition-colors duration-200 group-hover:animate-pulse">
        <path fill="currentColor" d="M10 2c0-.88 1.056-1.331 1.692-.722c1.958 1.876 3.096 5.995 1.75 9.12l-.08.174l.012.003c.625.133 1.203-.43 2.303-2.173l.14-.224a1 1 0 0 1 1.582-.153C18.733 9.46 20 12.402 20 14.295C20 18.56 16.409 22 12 22s-8-3.44-8-7.706c0-2.252 1.022-4.716 2.632-6.301l.605-.589c.241-.236.434-.43.618-.624C9.285 5.268 10 3.856 10 2"/>
      </svg>

      <span class="text-md font-semibold <%= tc %> transition-colors duration-200">
        <%= streak_count.to_i > 30 ? '30+' : streak_count %>
        <% if show_text %>
          <span class="ml-1 font-normal <%= tm %>">
            <%= streak_count.to_i > 30 ? 'day streak' : (streak_count.to_i == 1 ? 'day streak' : 'day streak') %>
          </span>
        <% end %>
      </span>
    </div>
  <% end %>
<% end %>

<% if use_turbo_frame %>
  <%= turbo_frame_tag "streak" do %>
    <% if streak_count && streak_count.to_i > 0 %>
      <div class="flex items-center justify-center">
        <%= content %>
      </div>
    <% end %>
  <% end %>
<% else %>
  <%= content %>
<% end %>