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

  import Shadix.Components.Avatar

  @impl true
  def description, do: "Displays a user avatar with an image and an initials fallback."

  @impl true
  def slot_example do
    """
    <.avatar_image id="preview-avatar-image" src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22%3E%3Crect width=%2264%22 height=%2264%22 fill=%22%23334155%22/%3E%3C/svg%3E" alt="Example avatar" />
    <.avatar_fallback id="example-avatar-fallback-2">CN</.avatar_fallback>
    """
  end

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

  @impl true
  def preview(assigns) do
    ~H"""
    <.avatar {@props}>
      <.avatar_image id="preview-avatar-image" src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22%3E%3Crect width=%2264%22 height=%2264%22 fill=%22%23334155%22/%3E%3C/svg%3E" alt="Example avatar" />
      <.avatar_fallback id="example-avatar-fallback-2">CN</.avatar_fallback>
    </.avatar>
    """
  end

  demo(
    "With image",
    [description: "An avatar that loads an image with initials as fallback."],
    """
    <.avatar>
      <.avatar_image id="demo-avatar-image" src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22%3E%3Crect width=%2264%22 height=%2264%22 fill=%22%23334155%22/%3E%3C/svg%3E" alt="Example avatar" />
      <.avatar_fallback id="example-avatar-fallback-3">CN</.avatar_fallback>
    </.avatar>
    """
  )

  demo(
    "Fallback only",
    [description: "When the image fails to load, the initials fallback is shown."],
    """
    <div class="flex items-center gap-4">
      <.avatar>
        <.avatar_image id="demo-avatar-broken" src="data:image/png;base64,invalid" alt="Jane Doe" />
        <.avatar_fallback id="example-avatar-fallback-4">JD</.avatar_fallback>
      </.avatar>
      <.avatar>
        <.avatar_image id="demo-avatar-no-src" alt="No Source" />
        <.avatar_fallback id="example-avatar-fallback-5">NS</.avatar_fallback>
      </.avatar>
    </div>
    """
  )
end