live_antd

defmodule LiveAntd.Components.Card do
  @moduledoc """
  Simple rectangular container.

  ## API

  ### Card

    * [ ] `actions`:	The action list, shows at the bottom of the Card	Array<ReactNode>	-
    * [x] `bodyStyle`:	Inline style to apply to the card content	CSSProperties	-
    * [x] `bordered`:	Toggles rendering of the border around the card	boolean	true
    * [ ] `cover`:	Card cover	ReactNode	-
    * [ ] `defaultActiveTabKey`:	Initial active TabPane's key, if activeTabKey is not set	string	-
    * [x] `extra`:	Content to render in the top-right corner of the card	ReactNode	-
    * [x] `headStyle`:	Inline style to apply to the card head	CSSProperties	-
    * [ ] `hoverable`:	Lift up when hovering card	boolean	false
    * [x] `loading`:	Shows a loading indicator while the contents of the card are being fetched	boolean	false
    * [x] `size`:	Size of card	default | small	default
    * [ ] `tabBarExtraContent`:	Extra content in tab bar	ReactNode	-
    * [ ] `tabList`:	List of TabPane's head	Array<{key: string, tab: ReactNode}>	-
    * [ ] `tabProps`:	Tabs
    * [ ] `onTabChange`:	Callback when tab is switched
    * [ ] `activeTabKey`:	Current TabPane's key	string	-
    * [x] `title`:	Card title
    * [ ] `type`:	Card style type, can be set to inner or not set	string	-

  ### Card.Grid

    * [ ] `className`:	The className of container	string	-
    * [ ] `hoverable`:	Lift up when hovering card grid	boolean	true
    * [ ] `style`:	The style object of container

  ### Card.Card.Meta

    * [ ] `avatar`:	Avatar or icon	ReactNode	-
    * [ ] `className`:	The className of container	string	-
    * [ ] `description`:	Description content	ReactNode	-
    * [ ] `style`:	The style object of container	CSSProperties	-
    * [ ] `title`:	Title content


  ## Example

    <Card
      title="Default size card"
      extra={<a href="#">More</a>}
      style={{ width: 300 }}
    >
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>

  """

  use Surface.Component

  # event

  # api property
  prop(title, :string)
  prop(size, :string, values: ~w(default small), default: "default")
  prop(extra, :any)
  prop(bordered, :boolean)
  prop(loading, :boolean)
  prop(bodyStyle, :string)
  prop(headStyle, :string)

  # basic property
  prop(class, :css_class)
  prop(style, :string, default: "foo: bar")

  # slot
  slot(default, required: true)

  def render(assigns) do
    ~H"""
    <div
      class={{
        "ant-card",
        class_value(@class),
        "ant-card-#{@size}": @size,
        "ant-card-bordered": @bordered,
        "ant-card-loading": @loading
      }}
      style="{{ "margin-top: 12px; #{@style}" }}"
    >
      <div class="ant-card-head" :if={{@title}}>
        <div class="ant-card-head-wrapper">
          <div class="ant-card-head-title" style="{{ @headStyle }}">{{ @title }}</div>
          <div class="ant-card-extra" :if={{ @extra }}>
            {{ @extra }}
          </div>
        </div>
      </div>
      <div class="ant-card-body" style="{{ @bodyStyle }}">
        <slot/>
      </div>
    </div>
    """
  end

  defp class_value(class) do
    class || get_config(:default_class)
  end
end