<!-- TODO: Bryt ut c-pagination__link till en egen komponent -->
<template>
  <div :class="getModifiersClass('c-pagination', modifiers)">
    <ul :class="hasContainer ? 'container-fluid' : ''">
      <li class="c-pagination__item" v-for="item in items" :key="item.text" @click="item.onClick">
        <a :aria-label="item.title" :class="getModifiersClass('c-pagination__link', modifiers)" v-html="item.text"></a>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import type { ModifierItems } from '../../models/ModifierItems';
import type PageinationItem from '../../models/PaginationItem';
import useComponentModifiers from '../../composable/useComponentModifiers';

withDefaults(
  defineProps<{
    items: PageinationItem[];
    hasContainer?: boolean;
    modifiers?: ModifierItems;
  }>(),
  {
    hasContainer: true,
  }
);

const { getModifiersClass } = useComponentModifiers();
</script>
