import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ChevronDown, Config, User, Webcam } from "@mynaui/icons-react";

function Basic() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">
          Praveen Juge
          <ChevronDown className="-mr-1 ml-2 size-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuLabel>Praveen Juge</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <User className="mr-2 size-4" />
          My Profile
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Config className="mr-2 size-4" />
          <span>Personal Settings</span>
          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuSeparator />

        <DropdownMenuSub>
          <DropdownMenuSubTrigger>
            <Webcam className="mr-2 size-4" />
            <span>Visibility</span>
          </DropdownMenuSubTrigger>
          <DropdownMenuPortal>
            <DropdownMenuSubContent>
              <DropdownMenuItem>
                <span>Online</span>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <span>Appear Offline</span>
              </DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuPortal>
        </DropdownMenuSub>

        <DropdownMenuSeparator />
        <DropdownMenuLabel inset>Current Status</DropdownMenuLabel>

        <DropdownMenuRadioGroup value="invisible">
          <DropdownMenuRadioItem value="online">Online</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="invisible">
            Invisible
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem disabled value="offline">
            Offline
          </DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>

        <DropdownMenuSeparator />
        <DropdownMenuLabel inset>My Permissions</DropdownMenuLabel>

        <DropdownMenuCheckboxItem checked>Admin</DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem>Member</DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem disabled>Customer</DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export { Basic }