<script setup lang="ts">
import type { ProjectContent } from "~/types/singleProject";
import SingleProjectVideoSlider from "./SingleProjectVideoSlider.vue";
import SingleProjectsImagesSlider from "./SingleProjectsImagesSlider.vue";

interface Props {
  projectContnet: ProjectContent;
  sectionBg: string;
  reverse: boolean;
}

const { projectContnet, sectionBg, reverse } = defineProps<Props>();

const titleParts = computed(() => {
  const words = projectContnet.title.trim().split(" ");
  return {
    firstWord: words[0],
    rest: words.slice(1).join(" "),
  };
});
</script>
<template>
  <section class="py-narrow-section" :class="sectionBg">
    <div class="container mx-auto px-4">
      <div
        class="flex flex-col justify-between gap-y-8 lg:flex-row lg:items-center"
        :class="reverse ? 'lg:flex-row-reverse' : 'lg:flex-row'"
      >
        <div class="flex w-full flex-col gap-8 lg:w-1/2">
          <h2 class="text-3xl leading-snug font-bold lg:text-[40px]">
            <span class="text-accent">{{ titleParts.firstWord }}&nbsp;</span>
            <span>{{ titleParts.rest }}</span>
          </h2>
          <div class="v-html-prose" v-html="projectContnet.description" />

          <div class="buttons flex flex-col gap-4">
            <NuxtLinkLocale
              v-if="projectContnet.websiteLink"
              :to="projectContnet.websiteLink"
              target="_blank"
              rel="noopener noreferrer"
              class="bg-foreground text-primary-foreground flex w-fit items-center gap-2 rounded-[.5rem] px-8 py-2"
            >
              <span>{{ $t("projectsButtons.visitWebsite") }}</span>
              <SvgVisitIcon />
            </NuxtLinkLocale>

            <div
              v-if="projectContnet.mobileLinks"
              class="xs:justify-start flex flex-wrap items-center justify-center gap-4"
            >
              <NuxtLinkLocale
                v-if="projectContnet.mobileLinks.googlePlayStore"
                :to="projectContnet.mobileLinks.googlePlayStore"
                target="_blank"
                rel="noopener noreferrer"
                class="bg-foreground text-primary-foreground xs:w-auto flex w-full min-w-[200px] items-center justify-center gap-2 rounded-[.5rem] px-3 py-2"
              >
                <span>{{ $t("projectsButtons.googlePlay") }}</span>
                <SvgPlayStore />
              </NuxtLinkLocale>

              <NuxtLinkLocale
                v-if="projectContnet.mobileLinks.appleStore"
                :to="projectContnet.mobileLinks.appleStore"
                target="_blank"
                rel="noopener noreferrer"
                class="bg-foreground text-primary-foreground xs:w-auto flex w-full min-w-[200px] items-center justify-center gap-2 rounded-[.5rem] px-3 py-2"
              >
                <span>{{ $t("projectsButtons.appleStore") }}</span>
                <SvgAppleStore />
              </NuxtLinkLocale>
            </div>
          </div>
        </div>

        <div class="w-full lg:w-5/12">
          <SingleProjectVideoSlider
            v-if="projectContnet.videos && projectContnet.videos.length > 0"
            :project-content="projectContnet.videos"
          />
          <SingleProjectsImagesSlider
            v-else-if="
              projectContnet.images && projectContnet.images.length > 0
            "
            :image-title="projectContnet.title"
            :images="projectContnet.images"
          />
        </div>
      </div>
    </div>
  </section>
</template>
<style scoped>
.v-html-prose :deep(*) {
  color: currentColor !important;
  font-family: "Almarai", system-ui, sans-serif !important;
  line-height: 1.9 !important;
}
</style>
