defmodule OutlookWeb.DarkModeComponent do
  @moduledoc """
    Provides components for showing and listing artikel and autoren.
  """
  use Phoenix.Component
  import Phoenix.HTML

  # alias Phoenix.LiveView.JS

  def dark_mode_widget(assigns) do
    ~H"""
    <div id="dark-mode-widget" class="absolute flex w-full justify-between p-0" phx-hook="dark_mode_widget">
      <div class="flex"></div>
      <div class="flex">
        <button class="p-2" type="button">
          <span class="dark:hidden">
            <Heroicons.sun class="w-5 h-5 stroke-stone-900 dark:stroke-stone-500" />
          </span>
          <span class="hidden dark:inline">
            <Heroicons.moon class="w-5 h-5 stroke-stone-900 dark:stroke-stone-500" />
          </span>
        </button>
        <ul class="hidden absolute z-50 top right-2 bg-white rounded-lg ring-1 ring-slate-900/10 shadow-lg overflow-hidden w-36 py-1 text-sm text-slate-700 font-semibold dark:bg-slate-800 dark:ring-0 dark:highlight-white/5 dark:text-slate-300 mt-8" aria-labelledby="headlessui-listbox-label-3" aria-orientation="vertical" id="headlessui-listbox-options-5" role="listbox" tabindex="0" data-headlessui-state="open">
          <li class="py-1 px-2 flex items-center cursor-pointer" id="selector-option-1" role="option" tabindex="-1">
            <Heroicons.sun  class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
            Light
          </li>
          <li class="py-1 px-2 flex items-center cursor-pointer" id="selector-option-2" role="option" tabindex="-1">
            <Heroicons.moon class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
            Dark
          </li>
          <li class="py-1 px-2 flex items-center cursor-pointer text-slate-700 dark:text-slate-300" id="selector-option-3" role="option" tabindex="-1" aria-selected="true" data-headlessui-state="selected">
            <Heroicons.computer_desktop class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
            System
          </li>
        </ul>
      </div>
    </div>
    """
  end
end