# GOOD - Composition
class PanelComponent < ViewComponent::Base
  renders_one :card, CardComponent
end

# BAD - Inheritance
class PanelComponent < CardComponent
end

# Good frameworks are extracted, not invented
# Develop single-use components first, extract when pattern repeats 3+ times

# GOOD
render UserCardComponent.new(user: current_user, signed_in: user_signed_in?)

# BAD - Accessing global state
class UserCardComponent < ViewComponent::Base
  def call
    if user_signed_in?  # Don't access global state
      ...
    end
  end
end

# GOOD
class ButtonComponent < ViewComponent::Base
  private
    def button_classes
      ["btn", "btn-#{type}", size_class].compact.join(" ")
    end
end

<button class="<%= button_classes %>">

# GOOD - Using slots
card.with_header do
  content_tag :h3, "Title"
end

# BAD - Passing HTML as argument
card.header = "<h3>Title</h3>".html_safe

# GOOD
def test_renders_button
  render_inline ButtonComponent.new(type: :primary)
  assert_selector "button.btn-primary"
end

# BAD - Testing only instance methods
def test_button_classes
  component = ButtonComponent.new(type: :primary)
  assert_equal "btn btn-primary", component.send(:button_classes)
end

class ButtonComponent < ViewComponent::Base
  def initialize(type:)
    @type = type
  end

  # Public interface is minimal

  private
    attr_reader :type

    # Helper methods are private but accessible in templates
    def button_classes
      "btn btn-#{type}"
    end
end

# GOOD - ViewComponent
render ButtonComponent.new(type: :primary, url: user_path(@user))

# OLD - Partial
render "shared/button", type: :primary, url: user_path(@user)

# OLD - Helper
button_tag type: :primary, url: user_path(@user)

# BAD - Confusing inheritance
class PanelComponent < CardComponent
  # Has its own template - which one renders?
end

<%# BAD %>
<button class="btn <%= type == :primary ? 'btn-primary' : 'btn-secondary' %>">

<%# GOOD - Use instance method %>
<button class="<%= button_classes %>">

# BAD - Security risk
render CardComponent.new(title: "<h3>#{user_input}</h3>".html_safe)

# GOOD - Use slots
render CardComponent.new do |card|
  card.with_title { content_tag :h3, user_input }
end

# BAD
class UserComponent < ViewComponent::Base
  def call
    current_user  # Accessing global state
    params[:id]   # Accessing request params
  end
end

# GOOD - Explicit dependencies
class UserComponent < ViewComponent::Base
  def initialize(user:, id:)
    @user = user
    @id = id
  end
end

# Use -Component suffix (Rails conventions)
ButtonComponent
UserCardComponent
NavigationComponent

1. Develop single-use components first
2. Extract to reusable component once pattern appears 3+ times
3. Consolidate similar patterns (DRY)
4. Minimize single-use view code

class Component < ViewComponent::Base
  def initialize(*args)
    # Called when component is instantiated
    super
  end

  def before_render
    # Called before rendering
    # Access to slots here
    @computed_value = expensive_calculation if header?
  end

  def call
    # Optional: custom render logic
    # By default renders the template
    content_tag :div, class: "wrapper" do
      super
    end
  end
end

class UserComponent < ViewComponent::Base
  def initialize(user:)
    @user = user
  end

  # Enable collection rendering
  with_collection_parameter :user
end

<%# Renders UserComponent for each user %>
<%= render UserComponent.with_collection(@users) %>

<%# With counter %>
<%= render UserComponent.with_collection(@users, :user_counter) %>

class Component < ViewComponent::Base
  def render?
    # Return false to skip rendering entirely
    user.present? && user.active?
  end
end

class Component < ViewComponent::Base
  # Access Rails helpers
  def formatted_date
    helpers.time_ago_in_words(created_at)
  end

  # Or delegate
  delegate :link_to, :content_tag, to: :helpers
end

class FormComponent < ViewComponent::Base
  renders_one :submit_button, ButtonComponent

  def initialize(url:, method: :post, **options)
    @url = url
    @method = method
    @options = options
  end

  private
    attr_reader :url, :method, :options
end

<%= form_with url: url, method: method, **options do |f| %>
  <%= content %>

  <% if submit_button? %>
    <%= submit_button %>
  <% else %>
    <%= f.submit "Submit", class: "btn btn-primary" %>
  <% end %>
<% end %>

class ModalComponent < ViewComponent::Base
  renders_one :title
  renders_one :body
  renders_many :actions, ActionComponent

  def initialize(id:, size: :medium)
    @id = id
    @size = size
  end

  private
    attr_reader :id, :size
end

class TableComponent < ViewComponent::Base
  renders_many :columns, ColumnComponent
  renders_many :rows, RowComponent

  def initialize(data:, **options)
    @data = data
    @options = options
  end
end