<script lang="ts" setup>
import { Skeleton } from '../ui/skeleton';
</script>

<template>
  <div class="cairo flex w-full flex-col items-center gap-6 md:flex-row xl:items-start">
    <!-- Map placeholder -->
    <Skeleton
      class="relative z-10 w-[95%] h-[200px] rounded-[8px] md:w-[250px] md:h-[200px] xl:h-[170.18px] xl:w-[170.18px]"
    />

    <!-- Text placeholders -->
    <div class="w-full xl:w-auto flex-1">
      <Skeleton class="w-[90%] h-[25px] m-2" />
      <Skeleton class="w-[90%] h-[25px] m-2" />
      <Skeleton class="w-[90%] h-[25px] m-2" />
      <Skeleton class="w-[80%] h-[25px] m-2" />
    </div>
  </div>
</template>
