import { $, html } from "sigpro";

$.component(
  "c-input-clear",
  (props) => {
    return html`
      <button
        type="button"
        class="btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100"
        ?hidden=${() => !props.value() || props.value().length === 0}
        @click=${() => props.value("")}>
        <span class="icon-[lucide--x] size-4"></span>
      </button>
    `;
  },
  ["value"],
);