<script setup>
import { reactive } from "vue";
import Navbar from "../components/Navbar.vue";

let guideList = reactive([
  {
    name: "廁所 / 無障礙廁所",
    value: "toilet",
  },
  {
    name: "客服",
    value: "service",
  },
  {
    name: "哺乳室",
    value: "nursing-room",
  },
  {
    name: "美食街",
    value: "food",
  },
  {
    name: "鼎泰豐",
    value: "din-tai-fung",
  },
  {
    name: "超市 / 伴手禮區",
    value: "market",
  },
]);

function getImagePath(image) {
  const imgUrl = `../src/assets/img/icon/${image}`;
  return imgUrl;
}
</script>

<template>
  <Navbar />
  <v-container class="mt-10 main-content">
    <v-row class="d-flex align-center">
      <v-col cols="12" lg="9">
        <v-sheet class="pa-2 ma-2">
          <img src="@/assets/img/map/b1.svg" alt="" class="map-img" />
        </v-sheet>
      </v-col>
      <v-col cols="12" lg="3">
        <v-sheet class="pa-2 ma-2">
          <p class="headline">選擇導覽點</p>
          <ul class="guide-list">
            <li v-for="item in guideList" :key="item.value">
              <!-- <img :src="getImagePath(item.img)" alt="" class="icon" /> -->
              <button>
                <p>{{ item.name }}</p>
              </button>
            </li>
          </ul>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

<style lang="scss" scoped>
.main-content {
  display: flex;
  align-items: center;

  .map-img {
    width: 100%;
    max-height: 100vh;
  }

  .guide-list {
    margin-top: 1.5rem;
    list-style: none;

    li {
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      border: 0.01rem solid var(--main-color);

      button {
        width: 100%;
        padding: 0.5rem;
        transition: all 0.3s;

        &:hover {
          background-color: var(--main-color);

          p {
            color: white;
          }
        }

        p {
          color: var(--main-color);
          letter-spacing: 0.3rem;
          text-align: center;
          transition: all 0.3s;
        }
      }
    }

    .icon {
      width: 2rem;
      margin-right: 0.8rem;
    }
  }

  .headline {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
  }
}
</style>
