import { ReactNode } from 'react'
import Taro from '@tarojs/taro'
import { Button, Text, View } from '@tarojs/components'
import './TiangongUI.scss'

export function TiangongHeader({ title, onBack }: { title: string; onBack?: () => void }) {
  const top = process.env.TARO_ENV === 'weapp' ? Taro.getSystemInfoSync().statusBarHeight || 0 : 0
  return <View className='tg-header' style={{ paddingTop: `${top}px` }}><View className='tg-header-row'>
    {onBack && <Button className='tg-back' aria-label='返回天宫' onClick={onBack}>‹</Button>}<Text>{title}</Text>
  </View></View>
}
export function TiangongModal({ title, onClose, children, variant = '' }: { title: string; onClose: () => void; children: ReactNode; variant?: string }) {
  return <View className='tg-modal-mask' onClick={onClose} catchMove><View className={`tg-modal ${variant}`} role='dialog' aria-label={title} onClick={e => e.stopPropagation()}>
    <Button className='tg-modal-close' aria-label='关闭弹窗' onClick={onClose}>×</Button>{children}
  </View></View>
}
export function TiangongMockNote() { return <Text className='tg-mock-note'>Mock 原型演示 · 不扣费、不连接设备 · 刷新重置</Text> }