Spotlight

'use client'

import React, { useState, useEffect } from 'react'
import { Button, Text, View, Icon, Spotlight } from 'biibaos'
import { Bell, Plus, Search, Settings, User } from 'lucide-react'

export default function App() {
  const [isOpen, setIsOpen] = useState(false)
  const items = [
    {
      id: 'profile',
      title: 'View Profile',
      description: 'Manage your account settings',
      icon: <Icon icon={User} size={16} />,
      group: 'Account',
      onSelect: () => { }
    },
    {
      id: 'settings',
      title: 'Settings',
      icon: <Icon icon={Settings} size={16} />,
      group: 'Account',
      shortcut: ['⌘', ','],
      onSelect: () => { }
    },
    {
      id: 'new-project',
      title: 'Create New Project',
      icon: <Icon icon={Plus} size={16} />,
      group: 'Actions',
      shortcut: ['⌘', 'N'],
      onSelect: () => { }
    },
    {
      id: 'notifications',
      title: 'Notifications',
      icon: <Icon icon={Bell} size={16} />,
      group: 'System',
      onSelect: () => { }
    },
  ]

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
        e.preventDefault()
        setIsOpen(true)
      }
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [])

  return (
    <div style={{ padding: '20px 0' }}>
      <Button
        variant="secondary"
        onClick={() => setIsOpen(true)}
        leftIcon={<Icon icon={Search} size={16} />}
        rightIcon={<Text variant="caption" color="subtle" style={{ marginLeft: 12 }}>⌘K</Text>}
      >
        Search commands...
      </Button>
      <Spotlight
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        items={items}
      />
    </div>
  )
}