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

interface Props {
  visible: boolean
  title?: string
  onClose: () => void
  children: ReactNode
}

export function BottomSheet({ visible, title, onClose, children }: Props) {
  if (!visible) return null
  return (
    <>
      <View className={styles.mask} onClick={onClose} />
      <View className={styles.panel}>
        <View className={styles.handle} />
        {title && (
          <View className={styles.header}>
            <Text className={styles.title}>{title}</Text>
            <View className={styles.close} onClick={onClose}>
              <Text className={styles.closeIcon}>×</Text>
            </View>
          </View>
        )}
        <View className={styles.body}>{children}</View>
      </View>
    </>
  )
}