defmodule FeenixUiWeb.Components.DrawerComponent do
  use Phoenix.Component

  def render(assigns) do
    assigns = assign_new(assigns, :position, fn -> "left" end)
    assigns = assign_new(assigns, :open, fn -> false end)
    assigns = assign_new(assigns, :title, fn -> "Drawer Title" end)

    assigns = assign(assigns, :position_classes, get_position_classes(assigns.position))

    ~H"""
    <%= if @open do %>
      <div class="fixed inset-0 z-50 overflow-hidden">
        <div class="absolute inset-0 overflow-hidden">
          <div class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
          <div class={@position_classes}>
            <div class="h-full bg-white shadow-xl">
              <div class="px-4 py-6 border-b border-gray-200">
                <div class="flex items-center justify-between">
                  <h2 class="text-lg font-medium text-gray-900"><%= @title %></h2>
                  <button class="text-gray-400 hover:text-gray-500">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="px-4 py-6">
                <p class="text-gray-600">Drawer content goes here...</p>
                <div class="mt-6 space-y-4">
                  <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Menu Item 1</a>
                  <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Menu Item 2</a>
                  <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Menu Item 3</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    <% else %>
      <button class="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
        Open Drawer
      </button>
    <% end %>
    """
  end

  defp get_position_classes(position) do
    case position do
      "left" -> "absolute inset-y-0 left-0 max-w-xs w-full"
      "right" -> "absolute inset-y-0 right-0 max-w-xs w-full"
      "top" -> "absolute inset-x-0 top-0 max-h-96 h-full"
      "bottom" -> "absolute inset-x-0 bottom-0 max-h-96 h-full"
      _ -> "absolute inset-y-0 left-0 max-w-xs w-full"
    end
  end
end