import aboutIcon from 'assets/images/icons/accent/info.avif'
import projectIcon from 'assets/images/icons/defrag.avif'
import socialIcon from 'assets/images/icons/user.avif'
import blogIcon from 'assets/images/icons/book.avif'

export const usePageStore = defineStore('page', () => {
  const title: string = 'Enderman'
  const description: string = 'official website'
  const keywords: string =
    'endermanch, enderman, developer, youtuber, filmmaker, artist, engineer'

  const pages = ref([
    {
      name: 'Home',
      path: '/',
    },
    {
      name: 'About',
      path: '/about',
      icon: {
        src: aboutIcon,
        alt: 'Information',
      },
    },
    {
      name: 'Projects',
      path: '/projects',
      icon: {
        src: projectIcon,
        alt: 'Blocks',
      },
    },
    {
      name: 'Socials',
      path: '/social',
      icon: {
        src: socialIcon,
        alt: 'Users',
      },
    },
    {
      name: 'Blog',
      path: '/blog',
      icon: {
        src: blogIcon,
        alt: 'Book',
      },
    },
  ])

  const reader = ref<boolean>(false)
  const animate = ref<boolean>(false)
  const dark = ref<boolean>(false)

  function _autoFetchPages() {
    while (pages.value.length) pages.value.pop()

    useRouter()
      .getRoutes()
      .forEach((route) =>
        pages.value.push({
          name: route.path.slice(1)[0].toUpperCase() + route.path.slice(2),
          path: route.path,
        }),
      )
  }

  return {
    title,
    description,
    keywords,
    pages,
    reader,
    animate,
  }
})