import { ChevronRightIcon, PlusIcon } from "lucide-react"

import {
  Menu,
  MenuCaption,
  MenuItem,
  MenuItemAction,
  MenuItemAvatar,
  MenuItemBadge,
  MenuItemDescription,
  MenuItemIcon,
  MenuItemMeta,
  MenuItemSwitch,
  MenuItemText,
  MenuItemTitle,
  MenuLabel,
  MenuProgress,
  MenuSeparator,
} from "@/components/ui/menu"

export function MenuDemo() {
  return (
    <div className="flex flex-wrap items-start gap-8">
      <Menu aria-label="Menu">
        {Array.from({ length: 5 }).map((_, index) => (
          <MenuItem key={index}>
            <MenuItemIcon>
              <PlusIcon />
            </MenuItemIcon>
            Text item
            <MenuItemIcon position="trailing">
              <ChevronRightIcon data-rtl-flip="true" />
            </MenuItemIcon>
          </MenuItem>
        ))}
      </Menu>

      <Menu aria-label="Rich menu" width="default">
        <MenuItem>
          <MenuItemIcon>
            <PlusIcon />
          </MenuItemIcon>
          <MenuItemAvatar>AG</MenuItemAvatar>
          <MenuItemText>
            <MenuItemTitle>Text item</MenuItemTitle>
          </MenuItemText>
          <MenuItemSwitch />
          <MenuItemBadge>Badge</MenuItemBadge>
          <MenuItemMeta>Text Right</MenuItemMeta>
          <MenuItemIcon position="trailing">
            <ChevronRightIcon data-rtl-flip="true" />
          </MenuItemIcon>
        </MenuItem>

        <MenuItem kind="multiline">
          <MenuItemIcon>
            <PlusIcon />
          </MenuItemIcon>
          <MenuItemAvatar size="lg">AG</MenuItemAvatar>
          <MenuItemText>
            <MenuItemTitle>Text item</MenuItemTitle>
            <MenuItemDescription>Supporting text</MenuItemDescription>
          </MenuItemText>
          <MenuItemSwitch active />
          <MenuItemBadge>Badge</MenuItemBadge>
          <MenuItemMeta>Text Right</MenuItemMeta>
          <MenuItemIcon position="trailing">
            <ChevronRightIcon data-rtl-flip="true" />
          </MenuItemIcon>
        </MenuItem>

        <MenuItem kind="action">
          <MenuItemIcon>
            <PlusIcon />
          </MenuItemIcon>
          <MenuItemText>
            <MenuItemTitle>Text item</MenuItemTitle>
            <MenuItemDescription>Supporting text</MenuItemDescription>
          </MenuItemText>
          <MenuItemAction>Button</MenuItemAction>
        </MenuItem>

        <MenuItem kind="progress">
          <MenuProgress indicator="40%" label="Label" optional="(Optional)" />
        </MenuItem>
        <MenuSeparator />
        <MenuItem kind="button">Button</MenuItem>
        <MenuLabel caption="Caption" label="Label" />
        <MenuCaption>Lorem ipsum dolor sit amet</MenuCaption>
      </Menu>

      <div dir="rtl">
        <Menu aria-label="Arabic menu">
          {Array.from({ length: 5 }).map((_, index) => (
            <MenuItem key={index}>
              <MenuItemIcon>
                <PlusIcon />
              </MenuItemIcon>
              {"\u0639\u0646\u0635\u0631 \u0646\u0635\u064a"}
              <MenuItemIcon position="trailing">
                <ChevronRightIcon data-rtl-flip="true" />
              </MenuItemIcon>
            </MenuItem>
          ))}
        </Menu>
      </div>
    </div>
  )
}
