import {
  Empty,
  Typography,
  Button,
  Space,
  InboxOutlined,
  PlusOutlined,
  ReloadOutlined,
  Text,
  Title,
  FC,
} from '@/imports';

interface EmptyStateProps {
  title?: string;
  description?: string;
  showAddButton?: boolean;
  showReloadButton?: boolean;
  onAdd?: () => void;
  onReload?: () => void;
}

export const EmptyState: FC<EmptyStateProps> = ({
  title = '暂无数据',
  description = '这里还没有任何数据',
  showAddButton = false,
  showReloadButton = false,
  onAdd,
  onReload,
}) => {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      padding: '60px 20px',
      minHeight: '300px',
    }}>
      <Empty
        image={Empty.PRESENTED_IMAGE_SIMPLE}
        description={
          <Space direction="vertical" align="center">
            <Title level={5}>{title}</Title>
            <Text type="secondary">{description}</Text>
            {(showAddButton || showReloadButton) && (
              <Space>
                {showAddButton && onAdd && (
                  <Button type="primary" icon={<PlusOutlined />} onClick={onAdd}>
                    新增数据
                  </Button>
                )}
                {showReloadButton && onReload && (
                  <Button icon={<ReloadOutlined />} onClick={onReload}>
                    重新加载
                  </Button>
                )}
              </Space>
            )}
          </Space>
        }
      />
    </div>
  );
};

export default EmptyState;