import {
  CommandPalette,
  CommandPaletteInput,
  CommandPaletteList,
  CommandPaletteSection,
  CommandPaletteItem,
  CommandPaletteEmpty,
  CommandPaletteFooter,
  useCommandPalette,
} from '@moul-dev/ui';

import { useState } from 'react';
import {
  Button,
  CommandPalette,
  CommandPaletteInput,
  CommandPaletteList,
  CommandPaletteSection,
  CommandPaletteItem,
  CommandPaletteEmpty,
  CommandPaletteFooter,
  useCommandPalette,
} from '@moul-dev/ui';

export function Example() {
  const { isOpen, setIsOpen, open } = useCommandPalette();

  return (
    <>
      <Button onPress={open}>
        Open Command Palette (⌘K)
      </Button>

      <CommandPalette isOpen={isOpen} onOpenChange={setIsOpen}>
        <CommandPaletteInput placeholder="Search commands..." />
        <CommandPaletteList>
          <CommandPaletteSection heading="Navigation">
            <CommandPaletteItem
              shortcut={['G', 'H']}
              onAction={() => console.log('Home')}
            >
              Home
            </CommandPaletteItem>
            <CommandPaletteItem
              shortcut={['G', 'D']}
              onAction={() => console.log('Dashboard')}
            >
              Dashboard
            </CommandPaletteItem>
          </CommandPaletteSection>

          <CommandPaletteSection heading="Actions">
            <CommandPaletteItem
              shortcut={['⌘', 'N']}
              description="Create a new document"
              onAction={() => console.log('New Document')}
            >
              New Document
            </CommandPaletteItem>
          </CommandPaletteSection>
        </CommandPaletteList>
        <CommandPaletteEmpty>No matching commands found.</CommandPaletteEmpty>
        <CommandPaletteFooter />
      </CommandPalette>
    </>
  );
}