defmodule LabelmakerWeb.RadioComponent do
  use Phoenix.Component

  # props: class, is_dm, settings, options
  attr :class, :string, default: ""
  attr :selected, :string, required: true
  attr :options, :list, required: true

  # class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary"

  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 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 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="cardStyle"
              value={option}
              checked={@selected == option}
              phx-change="set_card_style"
              phx-value-style={option}
              class="sr-only"
            />
            {option}
          </label>
        <% end %>
      </div>
    </fieldset>
    """
  end
end