defmodule Shadix.Website.Components.Docs.Collapsible do
  @moduledoc false
  use Shadix.Website.Components.ComponentDoc
  use Phoenix.Component

  import Shadix.Components.Collapsible

  @impl true
  def description,
    do: "An interactive disclosure widget that shows or hides a region of content."

  @impl true
  def slot_example do
    """

      <:trigger>
        <span class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm font-semibold hover:bg-accent hover:text-accent-foreground">
          @peduarte starred 3 repositories
        </span>
      </:trigger>
      <div class="rounded-md border px-4 py-3 font-mono text-sm">
        @radix-ui/primitives
      </div>
      <div class="rounded-md border px-4 py-3 font-mono text-sm">
        @radix-ui/colors
      </div>
    """
  end

  @impl true
  def prop_overrides, do: %{id: "preview-collapsible", class: "w-full max-w-sm"}

  @impl true
  def hidden_controls, do: [:id]

  @impl true
  def preview(assigns) do
    ~H"""
    <.collapsible {@props}>
      <:trigger>
        <span class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm font-semibold hover:bg-accent hover:text-accent-foreground">
          @peduarte starred 3 repositories
        </span>
      </:trigger>
      <div class="rounded-md border px-4 py-3 font-mono text-sm">
        @radix-ui/primitives
      </div>
      <div class="rounded-md border px-4 py-3 font-mono text-sm">
        @radix-ui/colors
      </div>
    </.collapsible>
    """
  end

  demo(
    "Initially open",
    [description: "Pass open to render the content expanded by default."],
    """
    <div class="w-full max-w-sm">
      <.collapsible id="open-collapsible" open>
        <:trigger>
          <span class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm font-semibold hover:bg-accent hover:text-accent-foreground">
            @peduarte starred 3 repositories
          </span>
        </:trigger>
        <div class="rounded-md border px-4 py-3 font-mono text-sm">
          @radix-ui/primitives
        </div>
        <div class="rounded-md border px-4 py-3 font-mono text-sm">
          @radix-ui/colors
        </div>
      </.collapsible>
    </div>
    """
  )
end