import { Button, Card } from '@moontra/moonui';
import { DataTable, Charts, RichTextEditor } from '@moontra/moonui-pro';

function App() {
  const data = [
    { id: 1, name: 'John', email: 'john@example.com' },
    { id: 2, name: 'Jane', email: 'jane@example.com' },
  ];

  const columns = [
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'email', header: 'Email' },
  ];

  return (
    <Card className="p-6">
      <h1 className="text-2xl font-bold mb-4">MoonUI Pro Demo</h1>
      
      {/* Pro DataTable */}
      <DataTable 
        data={data} 
        columns={columns}
        features={{
          sorting: true,
          filtering: true,
          pagination: true
        }}
      />
      
      {/* Pro Rich Text Editor */}
      <RichTextEditor
        placeholder="Start writing..."
        className="mt-4"
      />
    </Card>
  );
}

import { DataTable, VirtualTable, TreeTable } from '@moontra/moonui-pro';

// Advanced data table with all features
<DataTable
  data={data}
  columns={[
    {
      accessorKey: 'status',
      header: 'Status',
      cell: ({ row }) => <Badge>{row.getValue('status')}</Badge>,
      meta: {
        filterType: 'select',
        filterOptions: ['Active', 'Pending', 'Completed'],
        filterValueAccessor: (row) => row.status // Access raw data, not rendered Badge
      }
    },
    {
      accessorKey: 'name',
      header: 'Name'
    }
  ]}
  quickFilters={[
    {
      column: 'status',
      label: 'Status',
      options: 'auto', // Auto-detect from data
      showCounts: true // Show count for each option
    },
    {
      column: 'department',
      label: 'Department',
      multi: true // Multi-select
    }
  ]}
  facetedFilters={['category', 'tags']} // Checkbox filters with counts
  features={{
    sorting: true,
    filtering: true,
    pagination: true,
    rowSelection: true,
    columnResizing: true,
    virtualScrolling: true,
    export: ['csv', 'excel', 'json']
  }}
  onRowClick={handleRowClick}
  onSelectionChange={handleSelection}
/>

// Quick filter with auto-detection
<DataTable
  quickFilters={[
    {
      column: 'status',
      options: 'auto', // Automatically detects unique values from data
      showCounts: true  // Shows count next to each option
    }
  ]}
/>

// Faceted filters for categories
<DataTable
  facetedFilters={['category', 'brand', 'tags']}
  columns={[
    {
      accessorKey: 'category',
      meta: {
        filterType: 'select',
        filterOptions: ['Electronics', 'Clothing', 'Books'] // Predefined options
      }
    }
  ]}
/>

// Filter by raw data instead of rendered content
columns={[
  {
    accessorKey: 'status',
    cell: ({ row }) => (
      <Badge variant={getVariant(row.original.status)}>
        {formatStatus(row.original.status)}
      </Badge>
    ),
    meta: {
      filterValueAccessor: (row) => row.status // Access raw status value
    }
  }
]}

import { LineChart, BarChart, PieChart, ScatterChart } from '@moontra/moonui-pro';

// Beautiful charts with animations
<LineChart
  data={chartData}
  xAxis={{ dataKey: 'month' }}
  yAxis={{ domain: [0, 100] }}
  animations={{
    duration: 800,
    easing: 'easeInOut'
  }}
/>

import { RichTextEditor, CodeEditor, MarkdownEditor } from '@moontra/moonui-pro';

// WYSIWYG editor with toolbar
<RichTextEditor
  value={content}
  onChange={setContent}
  toolbar={{
    bold: true,
    italic: true,
    link: true,
    image: true,
    codeBlock: true
  }}
  placeholder="Start writing..."
/>

import { FormWizard, DateRangePicker, ColorPalette } from '@moontra/moonui-pro';

// Multi-step form wizard
<FormWizard
  steps={[
    { title: 'Personal Info', component: PersonalInfoStep },
    { title: 'Preferences', component: PreferencesStep },
    { title: 'Review', component: ReviewStep }
  ]}
  onComplete={handleFormComplete}
  validation={formValidation}
/>

import { DragDropList, SwipeableCard, VirtualList } from '@moontra/moonui-pro';

// Sortable list with drag & drop
<DragDropList
  items={listItems}
  onReorder={handleReorder}
  renderItem={({ item, dragHandleProps }) => (
    <div {...dragHandleProps}>
      {item.name}
    </div>
  )}
/>

import { ChartThemeProvider } from '@moontra/moonui-pro';

const customChartTheme = {
  colors: ['#8884d8', '#82ca9d', '#ffc658', '#ff7300'],
  fontSize: 12,
  fontFamily: 'Inter, sans-serif'
};

<ChartThemeProvider theme={customChartTheme}>
  <YourChartsHere />
</ChartThemeProvider>

import { VirtualList, VirtualTable } from '@moontra/moonui-pro';

// Handle thousands of items efficiently
<VirtualList
  items={thousandsOfItems}
  itemHeight={50}
  overscan={5}
  renderItem={({ item, index }) => (
    <div key={item.id}>Row {index}: {item.name}</div>
  )}
/>

import { InfiniteScroll } from '@moontra/moonui-pro';

// Infinite scrolling with lazy loading
<InfiniteScroll
  loadMore={loadMoreData}
  hasMore={hasMoreData}
  threshold={100}
  loader={<div>Loading...</div>}
>
  {items.map(item => <ItemComponent key={item.id} item={item} />)}
</InfiniteScroll>

import { MemoryOptimizedTable } from '@moontra/moonui-pro';

// Automatically manages memory for large datasets
<MemoryOptimizedTable
  data={massiveDataset}
  columns={columns}
  maxMemoryItems={1000}
  recycleNodes={true}
/>

import { SwipeableCard, GestureDrawer, TouchableArea } from '@moontra/moonui-pro';

// Swipeable cards with gesture support
<SwipeableCard
  onSwipeLeft={handleSwipeLeft}
  onSwipeRight={handleSwipeRight}
  threshold={50}
  velocityThreshold={0.3}
>
  <CardContent />
</SwipeableCard>

import { ResponsiveDataTable } from '@moontra/moonui-pro';

// Automatically adapts to mobile
<ResponsiveDataTable
  data={data}
  columns={columns}
  mobileBreakpoint={768}
  mobileLayout="cards" // or "stack"
  hideColumnsOnMobile={['id', 'created_at']}
/>

import { LicenseProvider } from '@moontra/moonui-pro';

// Wrap your app with license provider
<LicenseProvider licenseKey={process.env.MOONUI_PRO_LICENSE}>
  <App />
</LicenseProvider>

// v1.x (old)
<DataTable 
  data={data}
  sorting={true}
  filtering={true}
/>

// v2.x (new)
<DataTable
  data={data}
  columns={columns}
  features={{
    sorting: true,
    filtering: true
  }}
/>