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 (
    <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>
  )
}