/**
 * Paper Component - Lynx 版 MUI Paper
 * 纸张/卡片容器组件
 */
import './Paper.css'

export type PaperVariant = 'elevation' | 'outlined'

export interface PaperProps {
  /** 变体 */
  variant?: PaperVariant
  /** 阴影层级 (0-24) */
  elevation?: number
  /** 是否为正方形 (无圆角) */
  square?: boolean
  /** 子元素 */
  children?: any
  /** 自定义类名 */
  className?: string
  /** 内联样式 */
  style?: Record<string, any>
  /** sx 属性 */
  sx?: Record<string, any>
  /** 点击事件 */
  bindtap?: () => void
}

// 阴影样式
const shadowMap: Record<number, string> = {
  0: 'none',
  1: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
  2: '0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12)',
  3: '0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10)',
  4: '0 15px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05)',
  6: '0 20px 40px rgba(0,0,0,0.2)',
  8: '0 25px 50px rgba(0,0,0,0.25)',
}

export function Paper({
  variant = 'elevation',
  elevation = 1,
  square = false,
  children,
  className,
  style,
  sx,
  ...props
}: PaperProps) {
  const computedStyle: Record<string, any> = {
    backgroundColor: '#1e293b',
    ...(variant === 'elevation' && {
      boxShadow: shadowMap[elevation] || shadowMap[1],
    }),
    ...(variant === 'outlined' && {
      borderWidth: 1,
      borderColor: 'rgba(148, 163, 184, 0.2)',
    }),
    ...(!square && { borderRadius: 8 }),
    ...sx,
    ...style,
  }

  const classes = [
    'MuiPaper-root',
    `MuiPaper-${variant}`,
    !square && 'MuiPaper-rounded',
    variant === 'elevation' && `MuiPaper-elevation${elevation}`,
    className,
  ].filter(Boolean).join(' ')

  return (
    <view className={classes} style={computedStyle} {...props}>
      {children}
    </view>
  )
}

export default Paper
