<script setup lang="ts">
import { useJobsQuery } from "~/queries/career";

const { state: jobsData } = useJobsQuery();
</script>
<template>
  <section id="job-offers" class="py-section bg-gradient-odd">
    <div class="container mx-auto flex flex-col gap-8 px-4">
      <div
        v-if="jobsData?.data?.length === 0 || jobsData?.status === 'error'"
        class="container mx-auto flex items-center justify-center"
      >
        <EmptyState />
      </div>

      <div
        v-for="job in jobsData?.data"
        v-else
        :key="job.id"
        class="bg-surface-background border-surface-border flex flex-col items-center justify-between gap-y-6 rounded-[12px] border p-6 md:flex-row"
      >
        <div class="flex flex-col items-center gap-6 md:flex-row">
          <span class="rounded-sm border border-white p-2">
            <SvgJobIcon />
          </span>
          <div class="flex flex-col gap-2">
            <h3 class="text-2xl font-bold">{{ job.title }}</h3>
            <div class="flex gap-2">
              <span>{{ job.location }}</span>
              <span>|</span>
              <span class="text-accent">{{ job.type }} </span>
            </div>
          </div>
        </div>
        <NuxtLinkLocale
          :to="{ name: 'join-us-slug', params: { slug: String(job.slug) } }"
          class="ws-gradient-border grid h-[48px] w-full place-items-center px-6 md:w-auto md:px-10"
        >
          {{ $t("buttons.apply-now") }}
        </NuxtLinkLocale>
      </div>
    </div>
  </section>
</template>
<style scoped></style>
