import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["checkbox", "panel", "grid"]

  connect() {
    this.sync()
  }

  toggle() {
    this.sync()
  }

  sync() {
    if (!this.hasCheckboxTarget) return

    const on = this.checkboxTarget.checked
    this.panelTargets.forEach((el) => el.classList.toggle("hidden", !on))
    if (this.hasGridTarget) this.gridTarget.classList.toggle("lg:grid-cols-2", on)
  }
}