import {
  Cloud,
  CreditCard,
  Github,
  Keyboard,
  LifeBuoy,
  LogOut,
  Mail,
  MessageSquare,
  Plus,
  PlusCircle,
  Settings,
  User,
  UserPlus,
  Users,
} from 'lucide-react'
import { Button } from 'index'
import * as DropdownMenuPrimitive from './dropdown-menu'

export default () => (
  <DropdownMenuPrimitive.Root>
    <DropdownMenuPrimitive.Trigger asChild>
      <Button variant="outline">Open</Button>
    </DropdownMenuPrimitive.Trigger>
    <DropdownMenuPrimitive.Portal>
      <DropdownMenuPrimitive.Content tw="w-56">
        <DropdownMenuPrimitive.Label>My Account</DropdownMenuPrimitive.Label>
        <DropdownMenuPrimitive.Separator />
        <DropdownMenuPrimitive.Group>
          <DropdownMenuPrimitive.Item>
            <User tw="mr-2 h-4 w-4" />
            <span>Profile</span>
            <DropdownMenuPrimitive.Shortcut>⇧⌘P</DropdownMenuPrimitive.Shortcut>
          </DropdownMenuPrimitive.Item>
          <DropdownMenuPrimitive.Item>
            <CreditCard tw="mr-2 h-4 w-4" />
            <span>Billing</span>
            <DropdownMenuPrimitive.Shortcut>⌘B</DropdownMenuPrimitive.Shortcut>
          </DropdownMenuPrimitive.Item>
          <DropdownMenuPrimitive.Item>
            <Settings tw="mr-2 h-4 w-4" />
            <span>Settings</span>
            <DropdownMenuPrimitive.Shortcut>⌘S</DropdownMenuPrimitive.Shortcut>
          </DropdownMenuPrimitive.Item>
          <DropdownMenuPrimitive.Item>
            <Keyboard tw="mr-2 h-4 w-4" />
            <span>Keyboard shortcuts</span>
            <DropdownMenuPrimitive.Shortcut>⌘K</DropdownMenuPrimitive.Shortcut>
          </DropdownMenuPrimitive.Item>
        </DropdownMenuPrimitive.Group>
        <DropdownMenuPrimitive.Separator />
        <DropdownMenuPrimitive.Group>
          <DropdownMenuPrimitive.Item>
            <Users tw="mr-2 h-4 w-4" />
            <span>Team</span>
          </DropdownMenuPrimitive.Item>
          <DropdownMenuPrimitive.Sub>
            <DropdownMenuPrimitive.SubTrigger>
              <UserPlus tw="mr-2 h-4 w-4" />
              <span>Invite users</span>
            </DropdownMenuPrimitive.SubTrigger>
            <DropdownMenuPrimitive.Portal>
              <DropdownMenuPrimitive.SubContent>
                <DropdownMenuPrimitive.Item>
                  <Mail tw="mr-2 h-4 w-4" />
                  <span>Email</span>
                </DropdownMenuPrimitive.Item>
                <DropdownMenuPrimitive.Item>
                  <MessageSquare tw="mr-2 h-4 w-4" />
                  <span>Message</span>
                </DropdownMenuPrimitive.Item>
                <DropdownMenuPrimitive.Separator />
                <DropdownMenuPrimitive.Item>
                  <PlusCircle tw="mr-2 h-4 w-4" />
                  <span>More...</span>
                </DropdownMenuPrimitive.Item>
              </DropdownMenuPrimitive.SubContent>
            </DropdownMenuPrimitive.Portal>
          </DropdownMenuPrimitive.Sub>
          <DropdownMenuPrimitive.Item>
            <Plus tw="mr-2 h-4 w-4" />
            <span>New Team</span>
            <DropdownMenuPrimitive.Shortcut>⌘+T</DropdownMenuPrimitive.Shortcut>
          </DropdownMenuPrimitive.Item>
        </DropdownMenuPrimitive.Group>
        <DropdownMenuPrimitive.Separator />
        <DropdownMenuPrimitive.Item>
          <Github tw="mr-2 h-4 w-4" />
          <span>GitHub</span>
        </DropdownMenuPrimitive.Item>
        <DropdownMenuPrimitive.Item>
          <LifeBuoy tw="mr-2 h-4 w-4" />
          <span>Support</span>
        </DropdownMenuPrimitive.Item>
        <DropdownMenuPrimitive.Item disabled>
          <Cloud tw="mr-2 h-4 w-4" />
          <span>API</span>
        </DropdownMenuPrimitive.Item>
        <DropdownMenuPrimitive.Separator />
        <DropdownMenuPrimitive.Item>
          <LogOut tw="mr-2 h-4 w-4" />
          <span>Log out</span>
          <DropdownMenuPrimitive.Shortcut>⇧⌘Q</DropdownMenuPrimitive.Shortcut>
        </DropdownMenuPrimitive.Item>
      </DropdownMenuPrimitive.Content>
    </DropdownMenuPrimitive.Portal>
  </DropdownMenuPrimitive.Root>
)
