<script lang="ts" setup>
import { HomeMobileSliderSection, HomeWebSliderSection } from "#components";
import { useFeaturedProjects } from "~/queries/featuredProjects";
defineProps({
  backgroundEven: {
    type: Boolean,
    default: true,
  },
});
const { data: projects } = useFeaturedProjects();

const tabsData = computed(() => {
  return (
    projects.value?.services
      .map((service) => ({
        value: service.key,
        title: service.title,
        component:
          service.type === "web-development"
            ? HomeWebSliderSection
            : HomeMobileSliderSection,
        props: {
          servicesId: service.id,
        },
      }))
      .reverse() ?? []
  );
});
</script>

<template>
  <section
    id="projects-highlights"
    :class="backgroundEven ? 'bg-gradient-even' : 'bg-gradient-odd'"
    class="py-section overflow-x-clip"
  >
    <div class="container mx-auto px-4">
      <SectionHeadline :title="$t('projectsHighlight.title')" />
      <p class="pb-[2rem] text-center">
        {{ $t("projectsHighlight.description") }}
      </p>
    </div>
    <HorizontalTabsWithContent :tabs-data="tabsData" hydrate-on-visible />
  </section>
</template>

<style></style>
