# typed: false
# frozen_string_literal: true

module Ariadne
  module UI
    module Combobox
      module Option
        class Component < BaseComponent
          option :as, default: proc { :link } # :button

          option :type, default: proc { :multiple }
          option :text_content, default: proc { true }

          accepts_html_attributes disabled: false,
            tabindex: -1,
            data: proc {
              { action: "#{Ariadne::UI::Combobox::Component.stimulus_name}#checkboxClicked" }
            }

          def option_component
            cmp = type == :multiple ? Ariadne::Form::Checkbox : Ariadne::Form::Radio
            render(cmp::Component.new(html_attrs:))
          end

          style do
            base do
              [
                "ariadne-flex",
                "ariadne-gap-0.5",
                "ariadne-items-center",
                "ariadne-rounded",
                "!ariadne-ring-0",
                "hover:ariadne-bg-zinc-100",
                "hover:dark:ariadne-bg-zinc-800",
                "focus-within:ariadne-bg-zinc-100",
                "focus-within:dark:ariadne-bg-zinc-800",
              ]
            end
          end
        end
      end
    end
  end
end