<script setup lang="ts">

import { usePkServicesLinks } from '#adata-ui/composables/useHeaderNavigationLinks'

const services = usePkServicesLinks()

const blockStyles = [
  'first-border-gradient',
  'second-border-gradient',
  'third-border-gradient',
  'fourth-border-gradient',
  'fifth-border-gradient',
  'sixth-border-gradient',
  'seventh-border-gradient',
  'eighth-border-gradient',
  'ninth-border-gradient',
]
</script>

<template>
  <div class="grid grid-cols-3">
    <nuxt-link-locale
      v-for="(service, index) in services"
      :key="index"
      :to="service.to"
      :class="['flex flex-col justify-center items-center gap-2 p-2', blockStyles[index]]"
    >
      <div
        class="size-10 p-2 rounded-lg"
        :class="index === services.length - 1 ? 'bg-gradient-blue text-white' : 'bg-deepblue-900/5 dark:bg-gray-200/5'"
      >
        <component
          :is="service.icon"
          class="size-6 shrink-0"
        />
      </div>
      <p class="size-xs text-center">
        {{ service.title }}
      </p>
    </nuxt-link-locale>
  </div>
</template>

<style lang="scss" scoped>
.first-border-gradient {
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-image-source: linear-gradient(180deg, #FFFFFF 0%, #F4F5F6 100%);
  border-image-slice: 1;
}
.second-border-gradient {
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-image-source: linear-gradient(180deg, #FFFFFF 0%, #F4F5F6 100%);
  border-image-slice: 1;
}
.third-border-gradient {
  border-width: 0 0 1px 1px;
  border-style: solid;
  border-image-source: linear-gradient(218.84deg, #FFFFFF 41.56%, #F4F5F6 98.73%);
  border-image-slice: 1;
}
.fourth-border-gradient {
  border-width: 1px 1px 1px 0;
  border-style: solid;
  border-image-source: linear-gradient(125.34deg, #FFFFFF 7.49%, #F4F5F6 86.67%);
  border-image-slice: 1;
}
.fifth-border-gradient {
  border-width: 1px;
  border-style: solid;
  border-color: var(--Bg-tertiary-bg, #F4F5F6);
  border-image-slice: 1;
}
.sixth-border-gradient {
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-image-source: linear-gradient(261.06deg, #FFFFFF -6.98%, #F4F5F6 99.74%);
  border-image-slice: 1;
}
.seventh-border-gradient {
  border-width: 1px 1px 0 0;
  border-style: solid;
  border-image-source: linear-gradient(58.51deg, #FFFFFF 35.88%, #F4F5F6 85.8%);
  border-image-slice: 1;
}
.eighth-border-gradient {
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-image-source: linear-gradient(0deg, #FFFFFF 0%, #F4F5F6 100%);
  border-image-slice: 1;
}
.ninth-border-gradient {
  border-width: 1px 0 0 1px;
  border-style: solid;
  border-image-source: linear-gradient(41.08deg, #FFFFFF 6.74%, #F4F5F6 63.33%, #FEFEFE 91.03%);
  border-image-slice: 1;
}

.dark {
  .first-border-gradient {
    border-image-source: linear-gradient(180deg, #26282b 0%, #393d40 100%);
  }
  .second-border-gradient {
    border-image-source: linear-gradient(180deg, #26282b 0%, #393d40 100%);
  }
  .third-border-gradient {
    border-image-source: linear-gradient(218.84deg, #26282b 41.56%, #393d40 98.73%);
  }
  .fourth-border-gradient {
    border-image-source: linear-gradient(125.34deg, #26282b 7.49%, #393d40 86.67%);
  }
  .fifth-border-gradient {
    border-color: #393d40;
  }
  .sixth-border-gradient {
    border-image-source: linear-gradient(261.06deg, #26282b -6.98%, #393d40 99.74%);
  }
  .seventh-border-gradient {
    border-image-source: linear-gradient(58.51deg, #26282b 35.88%, #393d40 85.8%);
  }
  .eighth-border-gradient {
    border-image-source: linear-gradient(0deg, #26282b 0%, #393d40 100%);
  }
  .ninth-border-gradient {
    border-image-source: linear-gradient(41.08deg, #26282b 6.74%, #393d40 63.33%, #26282b 91.03%);
  }
}
</style>

