import React from 'react'
import { View, Button, Text } from '@tarojs/components'
import styles from './index.scss'

interface BottomButtonProps {
  text?: string
  onClick?: () => void
  disabled?: boolean
  loading?: boolean
  color?: string
  subtitle?: string
}

const BottomButton: React.FC<BottomButtonProps> = ({
  text = '确认',
  onClick,
  disabled = false,
  loading = false,
  color = '#0e932e',
  subtitle
}) => {
  return (
    <View className='px-4 fixed bottom-5 w-full bg-white'>
      {subtitle && (
        <View className='bottom-btn-subtitle'>
          <Text className='text-sm text-gray-500'>{subtitle}</Text>
        </View>
      )}
      <Button
        className='bottom-btn text-white rounded-full'
        disabled={disabled || loading}
        loading={loading}
        onClick={onClick}
        style={{ backgroundColor: color, borderColor: color }}
      >
        {loading ? '加载中...' : text}
      </Button>
    </View>
  )
}

export default BottomButton