<template>
  <Dropdown :menu="{ items }" placement="bottom" @open-change="onOpenChange" @menu-click="onMenuClick">
    <div class="flex items-center gap-2 cursor-pointer">
      <img
        src="@/assets/image/earth_18301626@2x.png"
        width="20px"
        height="20px"
        alt="earth"
      />
      <span>Eng</span>
      <img
        :class="show ? 'rotate-180' : ''"
        src="@/assets/image/Polygon 2.png"
        width="7px"
        height="6px"
        alt="polygon"
      />
    </div>
  </Dropdown>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Dropdown } from 'antdv-next';

const items = [
  {
    key: '1',
    label: 'English',
  },
  {
    key: '2',
    label: '中文',
  },
];

const show = ref(false);

const onOpenChange = (open: boolean) => {
  show.value = open;
}

const onMenuClick = (info: any) => {
  console.log('click', info);
}
</script>

<style scoped></style>
