import { defineComponent } from 'vue'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdSettings } from 'oh-vue-icons/icons'
import useRouterStore from '@/useRouterStore'
addIcons(MdSettings)
export default defineComponent(() => {
  const router = useRouterStore()
  return () => (
    <div
      class="absolute left-8 bottom-8 p-1 z-10 flex justify-center items-center cursor-pointer rounded-lg hover:bg-black/20 transition-all"
      style="filter: drop-shadow(0 0 4px rgba(0,0,0,0.2))"
      onClick={() => {
        router.path = 'settings-background'
      }}
    >
      <OhVueIcon name="md-settings" fill="white" scale={1.2} />
    </div>
  )
})