import {
  Calculator,
  Calendar,
  CreditCard,
  Settings,
  Smile,
  User,
} from 'lucide-react'

import * as CommandPrimitive from './command'

export default () => (
  <CommandPrimitive.Root tw="rounded-lg border border-slate-100  shadow-md dark:border-slate-800">
    <CommandPrimitive.Input
      tw="border-0 outline-none focus:outline-none"
      placeholder="Type a command  or search..."
    />
    <CommandPrimitive.List>
      <CommandPrimitive.Empty>No results found.</CommandPrimitive.Empty>
      <CommandPrimitive.Group heading="Suggestions">
        <CommandPrimitive.Item>
          <Calendar tw="mr-2 h-4 w-4" />
          <span>Calendar</span>
        </CommandPrimitive.Item>
        <CommandPrimitive.Item>
          <Smile tw="mr-2 h-4 w-4" />
          <span>Search Emoji</span>
        </CommandPrimitive.Item>
        <CommandPrimitive.Item>
          <Calculator tw="mr-2 h-4 w-4" />
          <span>Calculator</span>
        </CommandPrimitive.Item>
      </CommandPrimitive.Group>
      <CommandPrimitive.Separator />
      <CommandPrimitive.Group heading="Settings">
        <CommandPrimitive.Item>
          <User tw="mr-2 h-4 w-4" />
          <span>Profile</span>
          <CommandPrimitive.Shortcut>⌘P</CommandPrimitive.Shortcut>
        </CommandPrimitive.Item>
        <CommandPrimitive.Item>
          <CreditCard tw="mr-2 h-4 w-4" />
          <span>Billing</span>
          <CommandPrimitive.Shortcut>⌘B</CommandPrimitive.Shortcut>
        </CommandPrimitive.Item>
        <CommandPrimitive.Item>
          <Settings tw="mr-2 h-4 w-4" />
          <span>Settings</span>
          <CommandPrimitive.Shortcut>⌘S</CommandPrimitive.Shortcut>
        </CommandPrimitive.Item>
      </CommandPrimitive.Group>
    </CommandPrimitive.List>
  </CommandPrimitive.Root>
)
