<script setup lang="ts">
import { useGlobalClientsQuery } from "~/queries/clients";
import EmptyState from "../global/EmptyState.vue";
const { state: clientsData } = useGlobalClientsQuery();
const colorMode = useColorMode();
</script>
<template>
  <section class="clients bg-gradient-even py-section">
    <div class="container mx-auto px-4">
      <SectionHeadline :title="$t('clients.title')" />
      <div
        v-if="clientsData.status === 'error' || clientsData?.data?.length === 0"
        class="container mx-auto flex items-center justify-center"
      >
        <EmptyState />
      </div>

      <div
        v-else
        class="grid auto-cols-auto grid-cols-2 gap-y-[80px] md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
      >
        <div
          v-for="client in clientsData.data"
          :key="client.id"
          class="bg-gradient-default xs:hover:scale-150 relative mx-auto grid h-[120px] w-[120px] place-items-center !rounded-full transition-transform"
        >
          <div
            class="bg-gradient-default absolute right-0 bottom-0 h-[9.6px] w-[9.6px] rounded-full"
          />
          <div
            class="bg-gradient-default absolute top-0 left-0 h-[9.6px] w-[9.6px] rounded-full"
          />
          <NuxtLinkLocale :to="`/our-projects/${client.slug}`">
            <SvgClientsBg class="opacity-[0.07]" />
            <NuxtImg
              :src="client.colored_logo"
              class="absolute top-[50%] left-[50%] max-h-[70%] w-[80px] -translate-x-1/2 -translate-y-1/2 object-contain"
              :alt="client.title"
            />
          </NuxtLinkLocale>
        </div>
      </div>
    </div>
  </section>
</template>
<style scoped></style>
