<script setup lang="ts">
import DocsComponents from "@/components/docs/DocsComponents.vue";

import {
  GrDropDown,
  GrDropDownTrigger,
  GrDropdownMenuGroup,
  GrDropDownContent,
  GrDropDownItem,
  GrDropDownSeparator,
  GrDropDownSub,
  GrDropDownSubTrigger,
  GrDropDownSubContent,
  GrDropDownSubItem,
  GrParagraph,
  GrAvatar,
} from "@/components";
</script>

<template>
  <DocsComponents>
    <template v-slot:name>DropDown</template>
    <template v-slot:component>
      <GrDropDown>
        <GrDropDownTrigger>
          <GrAvatar :cursor="'pointer'" :placeholder="'Greenn'" />
        </GrDropDownTrigger>
        <GrDropDownContent align="center">
          <GrDropdownMenuGroup>
            <GrDropDownItem>
              <img src="@/assets/icons/user.svg" alt="user" />
              <GrParagraph color="gray-200" weight="medium"> Usuario </GrParagraph>
            </GrDropDownItem>
            <GrDropDownSub>
              <GrDropDownSubTrigger>
                <GrDropDownSubItem>
                  <img src="@/assets/icons/user.svg" alt="user" />
                  <GrParagraph color="gray-200" weight="medium"> Abrir Sub Menu </GrParagraph>
                </GrDropDownSubItem>
              </GrDropDownSubTrigger>
              <GrDropDownSubContent>
                <GrDropdownMenuGroup>
                  <GrDropDownItem>
                    <img src="@/assets/icons/exit.svg" alt="exit" />
                    <GrParagraph color="gray-200" weight="medium"> Sair </GrParagraph>
                  </GrDropDownItem>
                </GrDropdownMenuGroup>
                <GrDropDownSeparator />
                <GrDropdownMenuGroup>
                  <GrDropDownItem>
                    <img src="@/assets/icons/exit.svg" alt="exit" />
                    <GrParagraph color="gray-200" weight="medium"> Sair </GrParagraph>
                  </GrDropDownItem>
                  <GrDropDownItem>
                    <img src="@/assets/icons/exit.svg" alt="exit" />
                    <GrParagraph color="gray-200" weight="medium"> Sair </GrParagraph>
                  </GrDropDownItem>
                </GrDropdownMenuGroup>
              </GrDropDownSubContent>
            </GrDropDownSub>
            <GrDropDownItem>
              <img src="@/assets/icons/user.svg" alt="user" />
              <GrParagraph color="gray-200" weight="medium"> Usuario </GrParagraph>
            </GrDropDownItem>
          </GrDropdownMenuGroup>
          <GrDropDownSeparator />
          <GrDropdownMenuGroup>
            <GrDropDownItem>
              <img src="@/assets/icons/user.svg" alt="user" />
              <GrParagraph color="gray-200" weight="medium"> Usuario </GrParagraph></GrDropDownItem
            >
            <GrDropDownSub>
              <GrDropDownSubTrigger>
                <GrDropDownSubItem>
                  <img src="@/assets/icons/user.svg" alt="user" />
                  <GrParagraph color="gray-200" weight="medium"> Abrir Sub Menu </GrParagraph>
                </GrDropDownSubItem>
              </GrDropDownSubTrigger>
              <GrDropDownSubContent>
                <GrDropDownItem>
                  <img src="@/assets/icons/exit.svg" alt="exit" />
                  <GrParagraph color="gray-200" weight="medium"> Sair </GrParagraph>
                </GrDropDownItem>
                <GrDropDownItem>
                  <img src="@/assets/icons/exit.svg" alt="exit" />
                  <GrParagraph color="gray-200" weight="medium"> Sair </GrParagraph>
                </GrDropDownItem>
                <GrDropDownItem>
                  <img src="@/assets/icons/exit.svg" alt="exit" />
                  <GrParagraph color="gray-200" weight="medium"> Sair </GrParagraph>
                </GrDropDownItem>
              </GrDropDownSubContent>
            </GrDropDownSub>
          </GrDropdownMenuGroup>
        </GrDropDownContent>
      </GrDropDown>
    </template>

    <template v-slot:props> x </template>
  </DocsComponents>
</template>

<style lang="scss" scoped>
img {
  width: 16px;
}
</style>
