import { $.component, html } from "sigpro";

$.component(
  "c-radio",
  (props, { emit }) => {
    return html`
      <label class="label cursor-pointer flex justify-start gap-4">
        <input
          type="radio"
          .name=${props.name}
          .value=${props.value}
          .class=${() => `radio ${props.cls() ?? ""}`}
          .disabled=${props.disabled}
          .checked=${props.checked}
          @change=${(e) => {
            if (e.target.checked) emit("change", props.value());
          }} />
        ${() =>
          props.label()
            ? html`
                <span class="label-text">${props.label}</span>
              `
            : ""}
      </label>
    `;
  },
  ["checked", "name", "label", "cls", "disabled", "value"],
);