'use client'

import React from 'react'
import { cn } from '@/lib/utils'

/**
 * Frame Component for MDX Documentation
 * 
 * Wraps images and content with a styled border and optional caption.
 * Similar to Mintlify's Frame component.
 */

interface FrameProps {
  children: React.ReactNode
  caption?: string
  className?: string
}

export function Frame({ children, caption, className }: FrameProps) {
  return (
    <figure className={cn('my-6', className)}>
      <div className="overflow-hidden rounded-lg border border-border bg-muted/30">
        <div className="[&>img]:m-0 [&>img]:w-full [&>img]:h-auto">
          {children}
        </div>
      </div>
      {caption && (
        <figcaption className="mt-2 text-center text-sm text-muted-foreground">
          {caption}
        </figcaption>
      )}
    </figure>
  )
}

/**
 * Columns Component for MDX Documentation
 * 
 * Creates a multi-column layout for content.
 */

interface ColumnsProps {
  children: React.ReactNode
  cols?: 1 | 2 | 3 | 4
  className?: string
}

export function Columns({ children, cols = 2, className }: ColumnsProps) {
  const gridCols = {
    1: 'grid-cols-1',
    2: 'grid-cols-1 md:grid-cols-2',
    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
  }
  
  return (
    <div className={cn('grid gap-4 my-4', gridCols[cols], className)}>
      {children}
    </div>
  )
}

/**
 * Snippet Component for MDX Documentation
 * 
 * Placeholder for reusable content snippets.
 * In a full implementation, this would load content from a snippets directory.
 */

interface SnippetProps {
  file: string
  className?: string
}

export function Snippet({ file, className }: SnippetProps) {
  // In production, this would dynamically load the snippet content
  // For now, we show a placeholder
  return (
    <div className={cn('my-4 p-4 rounded-lg border border-dashed border-border bg-muted/30', className)}>
      <div className="text-sm text-muted-foreground">
        Snippet: <code className="text-xs bg-muted px-1 py-0.5 rounded">{file}</code>
      </div>
    </div>
  )
}

/**
 * Latex Component for MDX Documentation
 * 
 * Renders LaTeX mathematical expressions.
 * In a full implementation, this would use KaTeX or MathJax.
 */

interface LatexProps {
  children: string
  className?: string
}

export function Latex({ children, className }: LatexProps) {
  // In production, this would render LaTeX using KaTeX
  // For now, we show the raw expression in a styled container
  return (
    <span 
      className={cn(
        'inline-block px-2 py-1 font-mono text-sm bg-muted rounded',
        className
      )}
    >
      {children}
    </span>
  )
}
