import React from 'react'
import { View, Text } from '@tarojs/components'
import { Button } from '@nutui/nutui-react-taro'

interface EmptyStateProps {
  image?: string
  text?: string
  description?: string
  actionText?: string
  onAction?: () => void
}

const DEFAULT_IMAGE = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2Y1ZjVmNSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjE0IiBmaWxsPSIjY2NjIj7or77nqIvliY3liIY8L3RleHQ+PC9zdmc+'

const EmptyState: React.FC<EmptyStateProps> = ({
  image = DEFAULT_IMAGE,
  text = '暂无数据',
  description,
  actionText,
  onAction,
}) => {
  return (
    <View className='flex flex-col items-center justify-center py-12'>
      <View className='w-24 h-24 mb-4 rounded-full overflow-hidden'>
        <View
          className='w-full h-full bg-cover bg-center bg-no-repeat'
          style={{ backgroundImage: `url(${image})` }}
        />
      </View>
      <Text className='text-sm text-gray-500'>{text}</Text>
      {description && (
        <Text className='text-xs text-gray-400 mt-1'>{description}</Text>
      )}
      {actionText && onAction && (
        <Button
          type='primary'
          size='small'
          className='mt-4 rounded-full px-6'
          onClick={onAction}
        >
          {actionText}
        </Button>
      )}
    </View>
  )
}

export default EmptyState