defmodule <%= inspect(web_module) %>.Components.Card do
  @moduledoc """
  A sample component generated by the `mix surface.init` task.
  """

  use Surface.Component

  @doc "The header slot"
  slot header

  @doc "The footer slot"
  slot footer

  @doc "The main content slot"
  slot default

  @doc "The background color"
  prop rounded, :boolean, default: false

  @doc """
  The max width.
  """
  prop max_width, :string, values: ["sm", "md", "lg"]

  def render(assigns) do
    ~F"""
    <style>
      .card {
        overflow: hidden;
        border: 1px solid #ddd;
      }

      .content {
        padding: 24px 16px;
        color: #666;
        font-size: 16px;
        line-height: 24px;
      }

      .header {
        width: 100%;
        background-color: #ddd;
        padding: 24px;
        font-size: 1.5em;
        font-weight: 400;
        color: #0d9488;
      }

      .footer { padding: 1rem 1.5rem }

      .rounded-lg { border-radius: 1rem }

      .sm { max-width: 34rem }

      .md { max-width: 44rem }

      .lg { max-width: 54rem }
    </style>

    <div class={"card", @max_width, "rounded-lg": @rounded}>
      <div class="header">
        <#slot {@header} />
      </div>
      <div class="content">
        <#slot />
      </div>
      <div class="footer">
        <#slot {@footer} />
      </div>
    </div>
    """
  end
end