import { ComputedRef, defineComponent } from 'vue';
import { NuxtLink } from '#components';
import { IPage } from '~~/composables/pages';

import './PageBreadcrumb.scss';

export default defineComponent({
  async setup() {
    const { currentPage } = useCurrentPage();
    const { pages } = usePages();

    const parents:ComputedRef<IPage[]> = computed(() => currentPage.value ? getPageParents(currentPage.value, pages.value, [currentPage.value]) : []);

    return () => {
      return (<div class="ex-page-breadcrumb">
        {...parents.value.map((parent) => (
            <div class="ex-page-breadcrumb--crumb">
              /
              <NuxtLink to={getPagePath(parent, pages.value)}>
                {parent?.attributes?.slug}
              </NuxtLink>
            </div>
          ))}
      </div>);
    };
  },
});