import { TableOfContents } from '@wusandwitch/notion-markdown-toc-react'

function MyPage() {
  const markdownContent = `
# Introduction
This is the introduction section.

## Getting Started
Let's get started with the basics.

### Installation
Install the package using npm.

## Advanced Usage
More advanced features and configurations.
  `

  return (
    <div>
      <TableOfContents 
        content={markdownContent}
        title="Documentation"
      />
      {/* Your main content */}
    </div>
  )
}

import { TableOfContents, TableOfContentsTheme } from '@wusandwitch/notion-markdown-toc-react'

const customTheme: TableOfContentsTheme = {
  primaryColor: '#8b5cf6',
  backgroundColor: 'rgba(0, 0, 0, 0.8)',
  borderColor: '#374151',
  textColor: '#f9fafb',
  mutedTextColor: '#9ca3af',
  hoverColor: '#374151',
  fontFamily: '"Inter", sans-serif',
  fontSize: {
    title: '16px',
    level1: '14px',
    level2: '13px',
    level3Plus: '12px'
  }
}

function MyPage() {
  return (
    <TableOfContents 
      content={markdownContent}
      title="Custom TOC"
      theme={customTheme}
      position="right"
      offsetTop={100}
      offsetSide={20}
    />
  )
}

interface TableOfContentsTheme {
  primaryColor?: string        // Main accent color
  backgroundColor?: string     // Background color of expanded TOC
  borderColor?: string        // Border color
  textColor?: string          // Primary text color
  mutedTextColor?: string     // Secondary text color
  hoverColor?: string         // Hover background color
  fontFamily?: string         // Font family
  fontSize?: {
    title?: string            // Font size for title
    level1?: string           // Font size for H1
    level2?: string           // Font size for H2
    level3Plus?: string       // Font size for H3+
  }
}

const defaultTheme = {
  primaryColor: '#3b82f6',
  backgroundColor: 'rgba(255, 255, 255, 0.9)',
  borderColor: '#e5e7eb',
  textColor: '#111827',
  mutedTextColor: '#6b7280',
  hoverColor: '#f3f4f6',
  fontFamily: 'system-ui, -apple-system, sans-serif',
  fontSize: {
    title: '14px',
    level1: '14px',
    level2: '13px',
    level3Plus: '12px'
  }
}