import { $ html } from "sigpro";

$.component(
  "c-check",
  (props, host) => {
    return html`
      <label class="label cursor-pointer flex gap-2">
        <input
          type="checkbox"
          @change="${(e) => {
            e.stopPropagation();
            emit("change", e.target.checked);
          }}"
          .checked="${() => props.checked()}"
          .disabled="${() => props.disabled()}"
          class="${cls(props.toggle ? "toggle" : "checkbox")}" />
        ${() =>
          props.label
            ? html`
                <span class="label-text">${props.label}</span>
              `
            : ""}
      </label>
    `;
  },
  ["checked", "label", "class", "disabled", "toggle"],
);