Context Menu

'use client'

import React from 'react'
import { ContextMenu, ContextMenuItem, View, Text } from 'biibaos'
import { Copy, Trash, Edit, Share } from 'lucide-react'

export default function App() {
  const items: ContextMenuItem[] = [
    { label: 'Edit File', icon: <Edit size={16} />, shortcut: '⌘E', onClick: () => alert('Edit') },
    { label: 'Copy Link', icon: <Copy size={16} />, shortcut: '⌘C', onClick: () => alert('Copy') },
    { label: 'Share...', icon: <Share size={16} />, onClick: () => alert('Share') },
    { label: '', divider: true },
    { label: 'Delete', icon: <Trash size={16} />, shortcut: '⌘⌫', destructive: true, onClick: () => alert('Delete') }
  ]

  return (
    <View p={24} align="center" justify="center" w="100%">
      <ContextMenu items={items}>
        <View 
          p={32} 
          radius="xl" 
          bg="surface-raised" 
          border 
          style={{ cursor: 'context-menu', borderStyle: 'dashed' }}
        >
          <Text variant="h3" align="center">Right-click me</Text>
          <Text variant="caption" muted align="center">Long-press on mobile</Text>
        </View>
      </ContextMenu>
    </View>
  )
}