<template>
  <main class="">
    <div class="container mx-auto">
      <div
        class="text-center lg:text-4xl md:text-3xl text-2xl mt-20 font-bold text-[#273A97]"
      >
        {{ hosea.data[0].store_name }}
      </div>
    </div>

    <div class="container mx-auto p-4 max-w-3xl">
      <!-- <div class="flex items-center space-x-5 justify-center">
        <div class="flex items-center space-x-5">
          <img src="/icon/icon-time.png" class="w-6" />
          <div class="text-[#959595]">
            <p>Monday - Friday : 9.00- 18.00</p>
          </div>
          <div class="px-4 py-1 text-white bg-[#2CC200] rounded-full">OPEN</div>
        </div>
      </div> -->

      <div class="py-10 mx-20 text-center">
        <p class="text-center text-lg">{{ hosea.data[0].maps }}</p>
      </div>
    </div>

    <div
      class="bg-[url('/images/bg-hosea.svg')] bg-cover lg:bg-top md:bg-top bg-center"
    >
      <div class="container mx-auto p-4 max-w-5xl">
        <CarouselSlickHosea :data="hosea.data[0].image" />
        <div class="flex justify-center space-x-20 mt-20">
          <div class="text-center">
            <div class="text-center text-white">Google Maps:</div>
            <NuxtLink :to="hosea.data[0].maps_links" target="_blank">
              <div
                class="w-40 mt-2 px-4 py-2 text-black font-bold hover:text-white bg-[#F7FF00] hover:bg-[#EC2029] rounded-full"
              >
                Open Map
              </div>
            </NuxtLink>
          </div>
          <!-- <div class="text-center">
            <div class="text-center text-white">Our Activities:</div>
            <NuxtLink to="/k-buzz">
              <div class="w-40 mt-2 px-4 py-2 text-black font-bold hover:text-white bg-[#F7FF00] hover:bg-[#EC2029] rounded-full">Check Activities</div>
            </NuxtLink>
          </div> -->
        </div>
      </div>
    </div>

    <div class="bg-[#273A97] lg:px-10 md:px-10 px-5 -mt-[2px]">
      <div
        v-if="hosea.data[0].related_article.length > 0"
        class="container mx-auto text-white py-20"
      >
        <div class="lg:text-4xl md:text-3xl text-2xl font-bold">
          {{ translate("Related Activities") }}
        </div>
        <RelatedArticles :data="hosea.data[0].related_article" />
      </div>
      <div v-else>
        <div class="container mx-auto text-white py-20"></div>
      </div>
    </div>

    <section class="image-grid-section">
      <SectionConnectWithUs />
    </section>
  </main>
</template>

<script setup>
import { useFetch, useRoute } from "nuxt/app";
import { useLanguageStore } from "~/stores/lang";
const appConfig = useAppConfig();

const languageStore = useLanguageStore;
const router = useRoute();
const slug = router.params.id;

const { data: hosea } = await useFetch(
  appConfig.api.url + "/api/hosea/" + slug
);

const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString("en-GB", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  });
};

function translate(params) {
  return languageStore().translateWords(params);
}
</script>
<style></style>
