<%# locals: (plan:, form:, checked: false) %>

<% price = plan == "annual" ? 25 : 2.50 %>
<% frequency = plan == "annual" ? "/year" : "/month" %>

<div class="relative">
  <%= form.radio_button :plan, plan, class: "peer sr-only", checked: checked %>
  <%= form.label "plan_#{plan}", class: class_names(
    "flex flex-col gap-1 p-4 cursor-pointer rounded-lg border border-primary hover:bg-container",
    "peer-checked:bg-container peer-checked:rounded-2xl peer-checked:border-solid peer-checked:ring-4 peer-checked:ring-shadow",
    "transition-all duration-300"
  ) do %>
    <h3 class="text-sm text-secondary"><%= plan.titleize %></h3>

    <div class="mt-auto flex items-end gap-1">
      <p class="font-display text-xl lg:text-3xl font-medium text-primary">$<%= price %><%= frequency %></p>
    </div>

    <p class="text-sm text-secondary">
      <% if plan == "annual" %>
        Charged annually
      <% else %>
        Charged monthly
      <% end %>
    </p>
  <% end %>
</div>
