"use client"

/**
 * 教材模块内联 Error Boundary。
 *
 * 薄包装：委托给共享 SectionErrorBoundary，通过自定义 fallback 渲染
 * 调用方传入的 fallbackTitle/fallbackDescription/retryLabel。
 * 保留同名导出和 props 以兼容现有 import。
 */

import type { ReactNode } from "react"
import { AlertCircle } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { SectionErrorBoundary } from "@/shared/components/section-error-boundary"

interface TextbookSectionErrorBoundaryProps {
  children: ReactNode
  /** 自定义降级 UI 标题 */
  fallbackTitle?: string
  /** 自定义降级 UI 描述 */
  fallbackDescription?: string
  /** 重试按钮文案 */
  retryLabel?: string
}

export function TextbookSectionErrorBoundary({
  children,
  fallbackTitle,
  fallbackDescription,
  retryLabel,
}: TextbookSectionErrorBoundaryProps): ReactNode {
  const fallback = (_error: Error, reset: () => void): ReactNode => (
    <div
      role="alert"
      aria-live="assertive"
      className="flex h-full min-h-[200px] flex-col items-center justify-center gap-3 p-6 text-center"
    >
      <AlertCircle className="h-8 w-8 text-muted-foreground" aria-hidden="true" />
      {fallbackTitle && (
        <p className="text-sm font-medium text-foreground">{fallbackTitle}</p>
      )}
      {fallbackDescription && (
        <p className="text-xs text-muted-foreground">{fallbackDescription}</p>
      )}
      {retryLabel && (
        <Button size="sm" variant="outline" onClick={reset}>
          {retryLabel}
        </Button>
      )}
    </div>
  )

  return (
    <SectionErrorBoundary fallback={fallback}>
      {children}
    </SectionErrorBoundary>
  )
}
