import { View, Text } from '@tarojs/components'
import type { ReactNode } from 'react'
import styles from './index.module.scss'

interface Props {
  visible: boolean
  position?: 'top' | 'center' | 'bottom'
  onClose: () => void
  children?: ReactNode
  maxHeight?: string // e.g. '60vh'
}

export function Popup({
  visible,
  position = 'bottom',
  onClose,
  children,
  maxHeight = '60vh'
}: Props) {
  if (!visible) return null

  const positionClass = styles[`pos-${position}`]

  return (
    <>
      <View className={styles.mask} onClick={onClose} />
      <View
        className={`${styles.panel} ${positionClass}`}
        style={{ maxHeight }}
      >
        {children}
        <View className={styles.close} onClick={onClose}>
          <Text>×</Text>
        </View>
      </View>
    </>
  )
}