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

interface EmptyStateProps {
  icon?: string;
  text: string;
  hint?: string;
  actionText?: string;
  onAction?: () => void;
}

export default React.memo(function EmptyState({
  icon,
  text,
  hint,
  actionText,
  onAction,
}: EmptyStateProps) {
  const displayChar = icon || text.charAt(0);
  return (
    <View className='empty-state'>
      <View className='empty-state-icon-wrap'>
        <Text className='empty-state-icon-char'>{displayChar}</Text>
      </View>
      <Text className='empty-state-text'>{text}</Text>
      {hint && <Text className='empty-state-hint'>{hint}</Text>}
      {actionText && onAction && (
        <View className='empty-state-action' onClick={onAction}>
          <Text className='empty-state-action-text'>{actionText}</Text>
        </View>
      )}
    </View>
  );
});