defmodule LabelmakerWeb.RadioComponent do
  use Phoenix.Component

  attr :class, :string, default: ""
  attr :selected, :string, required: true
  attr :options, :list, required: true
  attr :event_name, :string, required: true

  def radio_component(assigns) do
    ~H"""
    <fieldset class={["flex flex-col w-full", @class]}>
      <div class="inline-flex overflow-hidden rounded w-full">
        <%= for {option, index} <- Enum.with_index(@options) do %>
          <label
            for={"radio-#{option}"}
            class={[
              "flex justify-center cursor-pointer w-full px-3 py-2
               text-sm font-medium capitalize border border-gray-300
               transition hover:text-primary-dark dark:hover:text-primary-light",
              if(@selected == option,
                do:
                  "bg-selected-light border-gray-600 dark:bg-selected-dark dark:text-fg-dark dark:border-gray-300 font-bold",
                else:
                  "bg-secondary-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 hover:bg-primary-dark hover:bg-primary-light"
              ),
              if(index == 0, do: "rounded-l", else: ""),
              if(index == length(@options) - 1, do: "rounded-r", else: ""),
              if(index != 0, do: "border-l border-gray-300", else: "")
            ]}
          >
            <input
              type="radio"
              name="radio_option"
              id={"radio-#{option}"}
              checked={@selected == option}
              phx-click={@event_name}
              phx-value-option={option}
              class="sr-only"
            />
            {option}
          </label>
        <% end %>
      </div>
    </fieldset>
    """
  end
end