# typed: false
# frozen_string_literal: true

module Ariadne
  module UI
    module Link
      class Component < Ariadne::BaseComponent
        option :href

        option :theme, default: proc { :base }
        option :size, default: proc { :base }

        include Ariadne::Behaviors::Tooltipable

        accepts_html_attributes do |html_attrs|
          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(theme:, size:), html_attrs[:class]].join(" "))
        end

        style do
          base do
            [
              "ariadne-cursor-pointer",
              "ariadne-text-content",
              "dark:ariadne-text-content-dark",
              # "ariadne-inline-flex",
              "ariadne-items-center",
              "ariadne-border-b",
              "ariadne-border-transparent",
            ]
          end

          variants do
            theme do
              base do
                [
                  "ariadne-text-indigo-600",
                  "dark:ariadne-text-indigo-400",

                  "[&>svg]:ariadne-text-zinc-400",
                  "[&>svg]:dark:ariadne-text-zinc-600",

                  "hover:ariadne-text-indigo-500",
                  "dark:hover:ariadne-text-indigo-300",
                  "hover:ariadne-border-indigo-500",
                  "dark:hover:ariadne-border-indigo-300",
                  "focus:ariadne-text-indigo-500",
                  "dark:focus:ariadne-text-indigo-300",
                  "focus:!ariadne-border-transparent",
                  "active:ariadne-bg-indigo-700/10",
                  "active:dark:ariadne-bg-indigo-300/10",
                ]
              end

              nude do
                [
                  "hover:ariadne-text-indigo-600",
                  "dark:hover:ariadne-text-indigo-400",
                  "hover:ariadne-border-indigo-600",
                  "dark:hover:ariadne-border-indigo-400",
                  "focus:ariadne-text-indigo-500",
                  "dark:focus:ariadne-text-indigo-300",
                  "focus:!ariadne-border-transparent",
                  "active:ariadne-bg-indigo-700/10",
                  "active:dark:ariadne-bg-indigo-300/10",
                ]
              end

              none do
                []
              end

              thick do
                [
                  "ariadne-font-semibold",
                ]
              end
            end
            size do
              xs { "ariadne-text-xs ariadne-gap-0.5 [&>svg]:ariadne-size-3" }
              sm { "ariadne-text-sm ariadne-gap-0.5 [&>svg]:ariadne-size-4" }
              md { "ariadne-text-base ariadne-gap-1 [&>svg]:ariadne-size-4" }
              lg { "ariadne-text-lg ariadne-gap-1 [&>svg]:ariadne-size-5" }
            end
          end
        end
      end
    end
  end
end