<template>
  <v-app-bar app color="white" flat class="py-1">
    <v-row justify="center" class="ma-0">
      <v-col cols="12" lg="11" class="pa-0">
        <v-row class="ma-0">
          <v-col cols="2" md="2" class="pa-0 d-flex align-center justify-center"
            ><v-toolbar-title class="d-flex justify-center">
              <img
                src="@/assets/logo.svg"
                alt="Logo"
                height="40"
              /> </v-toolbar-title
          ></v-col>
          <v-col cols="7" class="w-100 pa-0 d-none d-md-flex align-center">
            <v-tabs
              bg-color="transparent"
              class="pa-0 px-5 w-100"
              align-tabs="center"
              slider-color="transparent"
              height="40"
              center-active
            >
              <v-tab
                :to="link.path"
                v-for="link in links"
                :key="link"
                class="py-0 rounded-xl"
                selected-class="link-active-class"
              >
                {{ link.name }}
              </v-tab>
            </v-tabs>
          </v-col>
          <v-col
            class="d-none d-md-flex pa-0 align-center justify-center h-100"
            cols="3"
          >
            <v-text-field
              v-model="search"
              placeholder="Search Products..."
              hide-details
              rounded="xl"
              variant="solo-filled"
            >
              <template v-slot:append-inner>
                <v-btn
                  color="white"
                  size="small"
                  class="bg-primary"
                  icon="mdi-magnify"
                ></v-btn>
              </template>
            </v-text-field>
          </v-col>
        </v-row>
      </v-col>
    </v-row>

    <!-- Menu button for small screens -->
    <v-app-bar-nav-icon
      class="d-flex d-md-none"
      @click="drawer = !drawer"
    ></v-app-bar-nav-icon>
  </v-app-bar>

  <!-- Drawer for small screens -->
  <v-navigation-drawer v-model="drawer" app temporary>
    <v-list>
      <v-list-item>
        <v-list-item-title>Homeee</v-list-item-title>
      </v-list-item>
      <v-list-item>
        <v-list-item-title>About</v-list-item-title>
      </v-list-item>
      <v-list-item>
        <v-list-item-title>Contact</v-list-item-title>
      </v-list-item>
      <v-list-item class="">
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          label="Search"
          single-line
          hide-details
        ></v-text-field>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script setup>
import { ref } from "vue";
const drawer = ref(false);
const links = [
  {
    name: "Home",
    path: "/",
  },
  {
    name: "Products",
    path: "/products",
  },
  {
    name: "Distributors",
    path: "/distributors",
  },
  {
    name: "Services",
    path: "/services",
  },
  {
    name: "About",
    path: "/about",
  },
  {
    name: "Contact",
    path: "/contact",
  },
];
</script>

<style scoped>
.links {
  display: flex;
  gap: 16px;
}
.link-active-class {
  background: #e9ae0c4d;
}
.v-field {
  box-shadow: 3.33px 8.33px 16.67px 0px #00000021 !important;
}
</style>
