<.phx_ui_progress_bar width={35} size="xs" bg_color="bg-blue-100" fg_color="bg-blue-500" />
    <.phx_ui_progress_bar width={45} size="sm" bg_color="bg-blue-100" fg_color="bg-blue-500" />
    <.phx_ui_progress_bar width={55} size="md" bg_color="bg-blue-100" fg_color="bg-blue-500" />
    <.phx_ui_progress_bar width={65} size="lg" bg_color="bg-blue-100" fg_color="bg-blue-500" />
    <.phx_ui_progress_bar width={75} size="xl" bg_color="bg-blue-100" fg_color="bg-blue-500" />

defmodule PHXUIWeb.Components.ProgressBars do
  use Phoenix.Component

  @moduledoc """
  PHX UI progress bar component
  """

  @doc """
  Renders a progress bar.

  ## Examples

      <.phx_ui_progress_bar width={55} size="md" bg_color="bg-blue-100" fg_color="bg-blue-500" />

  """
  attr :rest, :global
  attr :class, :string, default: ""
  attr :size, :string, default: "xs", values: ["xs", "sm", "md", "lg", "xl"]
  attr :width, :integer, default: 0
  attr :show_label, :boolean, default: false
  attr :rounded, :boolean, default: false
  attr :label_color, :string, default: "text-white"
  attr :bg_color, :string, default: "bg-white"
  attr :fg_color, :string, default: "bg-blue-500"
  attr :font_weight, :string, default: "normal"

  def phx_ui_progress_bar(assigns) do
    ~H"""
    <div class="max-w-full">
      <div class={[
        "flex overflow-hidden w-full",
        size_classes(@size, @show_label),
        font_weight_class(@font_weight),
        @bg_color,
        @rounded && "rounded-md",
        @class
      ]}>
        <div
          :if={not @show_label}
          class={[
            "text-xs flex flex-col text-center text-white justify-center whitespace-nowrap font-normal leading-6 py-2",
            @fg_color
          ]}
          style={"width: #{@width}%;"}
        >
        </div>
        <div
          :if={@show_label}
          class={[
            "text-xs flex flex-col text-center text-white justify-center whitespace-nowrap font-normal leading-6 py-2",
            @fg_color
          ]}
          style={"width: #{@width}%;"}
        >
          <%= @width %>%
        </div>
      </div>
    </div>
    """
  end

  defp size_classes(_size, true), do: "h-5"

  defp size_classes(size, false) do
    case size do
      "xs" -> "h-1"
      "sm" -> "h-2"
      "md" -> "h-3"
      "lg" -> "h-4"
      "xl" -> "h-5"
    end
  end

  defp font_weight_class(font_weight) do
    case font_weight do
      "light" -> "font-light"
      "normal" -> "font-normal"
      "medium" -> "font-medium"
      "semibold" -> "font-semibold"
      "bold" -> "font-bold"
    end
  end
end

<div class="w-full space-y-8">
    <.phx_ui_progress_bar width={35} show_label bg_color="bg-blue-100" fg_color="bg-blue-500" />
    <.phx_ui_progress_bar width={55} show_label bg_color="bg-red-100" fg_color="bg-red-500" />
    <.phx_ui_progress_bar width={75} show_label bg_color="bg-green-100" fg_color="bg-green-500" />
  </div>

defmodule PHXUIWeb.Components.ProgressBars do
  use Phoenix.Component

  @moduledoc """
  PHX UI progress bar component
  """

  @doc """
  Renders a progress bar.

  ## Examples

      <.phx_ui_progress_bar width={55} size="md" bg_color="bg-blue-100" fg_color="bg-blue-500" />

  """
  attr :rest, :global
  attr :class, :string, default: ""
  attr :size, :string, default: "xs", values: ["xs", "sm", "md", "lg", "xl"]
  attr :width, :integer, default: 0
  attr :show_label, :boolean, default: false
  attr :rounded, :boolean, default: false
  attr :label_color, :string, default: "text-white"
  attr :bg_color, :string, default: "bg-white"
  attr :fg_color, :string, default: "bg-blue-500"
  attr :font_weight, :string, default: "normal"

  def phx_ui_progress_bar(assigns) do
    ~H"""
    <div class="max-w-full">
      <div class={[
        "flex overflow-hidden w-full",
        size_classes(@size, @show_label),
        font_weight_class(@font_weight),
        @bg_color,
        @rounded && "rounded-md",
        @class
      ]}>
        <div
          :if={not @show_label}
          class={[
            "text-xs flex flex-col text-center text-white justify-center whitespace-nowrap font-normal leading-6 py-2",
            @fg_color
          ]}
          style={"width: #{@width}%;"}
        >
        </div>
        <div
          :if={@show_label}
          class={[
            "text-xs flex flex-col text-center text-white justify-center whitespace-nowrap font-normal leading-6 py-2",
            @fg_color
          ]}
          style={"width: #{@width}%;"}
        >
          <%= @width %>%
        </div>
      </div>
    </div>
    """
  end

  defp size_classes(_size, true), do: "h-5"

  defp size_classes(size, false) do
    case size do
      "xs" -> "h-1"
      "sm" -> "h-2"
      "md" -> "h-3"
      "lg" -> "h-4"
      "xl" -> "h-5"
    end
  end

  defp font_weight_class(font_weight) do
    case font_weight do
      "light" -> "font-light"
      "normal" -> "font-normal"
      "medium" -> "font-medium"
      "semibold" -> "font-semibold"
      "bold" -> "font-bold"
    end
  end
end