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

  import Shadix.Components.Card

  @impl true
  def description,
    do:
      "A flexible container for grouping related content, with optional header, footer, and action areas."

  @impl true
  def slot_example do
    """

      <.card_header>
        <.card_title>Create project</.card_title>
        <.card_description>Deploy your new project in one click.</.card_description>
      </.card_header>
      <.card_content>
        <p>Card content goes here. Use it to group related information.</p>
      </.card_content>
      <.card_footer>
        <span class="text-sm text-muted-foreground">Footer area</span>
      </.card_footer>
    """
  end

  @impl true
  def prop_overrides, do: %{class: "w-[360px]"}

  @impl true
  def hidden_controls, do: []

  # Keep this composition in sync with slot_example/0: CodeGen wraps that source
  # in the same card root and adds the non-default values from @props.
  @impl true
  def preview(assigns) do
    ~H"""
    <.card {@props}>
      <.card_header>
        <.card_title>Create project</.card_title>
        <.card_description>Deploy your new project in one click.</.card_description>
      </.card_header>
      <.card_content>
        <p>Card content goes here. Use it to group related information.</p>
      </.card_content>
      <.card_footer>
        <span class="text-sm text-muted-foreground">Footer area</span>
      </.card_footer>
    </.card>
    """
  end

  demo("Basic", [description: "Header, content, and footer."], """
  <.card class="w-[360px]">
    <.card_header>
      <.card_title>Create project</.card_title>
      <.card_description>Deploy your new project in one click.</.card_description>
    </.card_header>
    <.card_content>
      <p>Card content goes here. Use it to group related information.</p>
    </.card_content>
    <.card_footer>
      <span class="text-sm text-muted-foreground">Footer area</span>
    </.card_footer>
  </.card>
  """)

  demo(
    "With action",
    [description: "A card_action placed in the header aligns to the top-right."],
    """
    <.card class="w-[360px]">
      <.card_header>
        <.card_title>Notifications</.card_title>
        <.card_description>You have 3 unread messages.</.card_description>
        <.card_action>
          <button class="text-sm font-medium text-primary hover:underline">Mark all read</button>
        </.card_action>
      </.card_header>
      <.card_content>
        <p>Check your inbox for the latest updates from your team.</p>
      </.card_content>
    </.card>
    """
  )
end