<script setup lang="ts">
import { ChevronRight, ChevronLeft } from "lucide-vue-next";
import type { ProjectDetails } from "~/types/singleProject";

interface Props {
  projectInfo: ProjectDetails;
}
const { projectInfo } = defineProps<Props>();

const { locale, t } = useI18n();
const dir = computed(() => (locale.value === "ar" ? "rtl" : "ltr"));

useBreadcrumbSchema([
  { name: t("ourProjects"), link: "/our-projects" },
  { name: projectInfo.title },
]);
</script>
<template>
  <header class="project-hero -mt-header relative min-h-screen">
    <NuxtImg
      :src="projectInfo.background_image"
      class="absolute inset-0 block h-full w-full object-contain"
      :alt="projectInfo.title"
    />
    <div class="bg-hero-bg absolute inset-0 z-[1]" />
    <div
      class="relative z-[2] container mx-auto flex min-h-screen flex-col gap-6 px-4 sm:gap-4"
    >
      <div class="mx-auto pt-[96px]">
        <Breadcrumb>
          <BreadcrumbList class="text-primary flex items-center gap-1">
            <BreadcrumbItem>
              <BreadcrumbLink as-child>
                <NuxtLinkLocale to="/"> {{ t("home") }} </NuxtLinkLocale>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator>
              <component
                :is="dir === 'ltr' ? ChevronRight : ChevronLeft"
                :size="20"
              />
            </BreadcrumbSeparator>
            <BreadcrumbItem>
              <BreadcrumbLink as-child>
                <NuxtLinkLocale to="/our-projects">
                  {{ t("ourProjects") }}
                </NuxtLinkLocale>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator>
              <component
                :is="dir === 'ltr' ? ChevronRight : ChevronLeft"
                :size="20"
              />
            </BreadcrumbSeparator>
            <BreadcrumbItem>
              <BreadcrumbPage class="text-accent">
                {{ projectInfo.title }}
              </BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </div>
      <div
        class="flex h-full min-h-[calc(100vh-170px)] w-full flex-col items-center justify-center"
      >
        <div class="mb-3">
          <NuxtImg
            :src="projectInfo.colored_logo"
            :alt="projectInfo.title"
            :width="126"
            :height="64"
          />
        </div>
        <div class="caption mb-8 flex flex-col gap-4 text-center">
          <h1
            class="dark-text-gradient mx-auto text-3xl font-bold lg:w-[940px] lg:text-[2.5rem]"
          >
            {{ projectInfo.title }}
          </h1>
          <p class="dark-text-gradient mx-auto lg:w-[850px] lg:text-lg">
            {{ projectInfo.description }}
          </p>
        </div>
        <div class="created-at flex items-center gap-2">
          <p>{{ projectInfo.country }}</p>
          <p>|</p>
          <p>{{ projectInfo.created_year }}</p>
          <SvgClock />
        </div>
      </div>
    </div>
  </header>
</template>

<style scoped></style>
