<script setup lang="ts">
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import MapPin from "~/components/svg/country/MapPin.vue";
import CardMap from "~/components/card/CardMap.vue";

const dataState = ref({
  open: false,
});
</script>

<template>
  <div class="flex justify-center">
    <Accordion type="single" collapsible>
      <AccordionItem
        value="locations"
        class="w-[380px] overflow-hidden rounded-[40px] border border-gray-200 shadow-sm"
      >
        <AccordionTrigger
          class="flex h-[53px] w-full items-center justify-between rounded-[40px] px-6 hover:no-underline"
          dir="ltr"
          :class="
            dataState.open
              ? 'bg-white'
              : 'bg-gradient-to-r from-cyan-50 to-purple-50'
          "
        >
          <div class="flex items-center justify-center gap-2">
            <MapPin class="h-5 w-5" />
            <span class="text-base font-medium text-gray-800"
              >Our Locations</span
            >
          </div>
        </AccordionTrigger>

        <!-- Accordion Content -->
        <AccordionContent
          class="space-y-4 bg-gradient-to-r from-cyan-50 to-purple-50 p-6 text-end text-gray-700"
        >
          <div>
            <h3 class="font-semibold text-cyan-700">Cairo, Egypt</h3>
            <p class="mt-1 flex items-start gap-2 ">
             38  El-Thawra, Ad Doqi, Dokki, Giza Governorate 3751330 
              <MapPin class="mt-0.5 h-4 w-4 text-cyan-600" />
            </p>
          </div>
          <div>
            <h3 class="font-semibold text-cyan-700">Kingdom of Saudi Arabia</h3>
            <p class="mt-1 flex items-start gap-2">
              Garden Complex, Anas Bin Malik Rd, Al Malqa, Riyadh 13524
              <MapPin class="mt-0.5 h-4 w-4 text-cyan-600" />
            </p>
               <div class="mt-4 p-[2px] rounded-[16px] bg-gradient-to-r from-[#00BED7] via-[#6489E3] to-[#C853EF]">
            <div class="rounded-[16px] bg-white h-[150px]">
              <CardMap />
            </div>
          </div>
          </div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  </div>
</template>

<style scoped>
.AccordionChevron[data-state="open"] {
  transform: rotate(180deg);
}
</style>
