import { Button } from "@mantine/core";
import { Command } from "cmdk";
import { useState } from "react";

export default function CmdkTestDemo() {
  const [opened, setOpened] = useState(false);

  const actions = [
    { id: "1", label: "First", description: "First panel" },
    { id: "2", label: "Second", description: "Second panel" },
    { id: "3", label: "Third", description: "Third panel" },
  ];

  return (
    <>
      <Button onClick={() => setOpened(true)} variant="default" mb="md">
        Open Command Menu (Ctrl + K)
      </Button>

      <Command.Dialog
        open={opened}
        onOpenChange={() => setOpened(false)}
        label="Global Command Menu"
      >
        <Command.Input placeholder="Search Tab ..." autoFocus />

        <Command.List>
          <Command.Empty>No results found.</Command.Empty>

          <Command.Group>
            {actions.map((action) => (
              <Command.Item key={action.id}>
                <div>
                  <div>{action.label}</div>
                  <small style={{ color: "var(--mantine-color-dimmed)" }}>
                    {action.description}
                  </small>
                </div>
              </Command.Item>
            ))}
          </Command.Group>
        </Command.List>
      </Command.Dialog>
    </>
  );
}