import * as React from "react";
import PropTypes from "prop-types";
import Image, { badgeSizes } from "@crave/farmblocks-image";
import Text from "@crave/farmblocks-text";
import Card from "@crave/farmblocks-card";
import styled from "styled-components";

import helperSrc from "../constants/helperIcon";

const CardWrapper = styled(Card)`
  margin-top: 16px;
  display: flex;

  .centered {
    align-self: center;
    margin-left: 10px;
  }
`;

const EmptyCard = ({ noResultsMessage }) => (
  <CardWrapper type="NEUTRAL">
    <Image src={helperSrc} badge size={badgeSizes.MEDIUM} />
    <Text className="centered">{noResultsMessage}</Text>
  </CardWrapper>
);

EmptyCard.defaultProps = {
  noResultsMessage: "No results found"
};

EmptyCard.propTypes = {
  noResultsMessage: PropTypes.string
};

CardWrapper.displayName = "EmptyCard";

export default EmptyCard;

@@ -441,20 +441,20 @@
  %7D%0A%60;%0A%0Ac
-onst
+lass
  EmptyCa
@@ -460,38 +460,64 @@
 ard 
-= (%7B noResultsMessage %7D) =%3E (%0A
+extends React.Component %7B%0A  render() %7B%0A    return (%0A    
   %3CC
@@ -543,16 +543,20 @@
 UTRAL%22%3E%0A
+    
     %3CIma
@@ -608,16 +608,20 @@
 IUM%7D /%3E%0A
+    
     %3CTex
@@ -644,16 +644,27 @@
 tered%22%3E%7B
+this.props.
 noResult
@@ -680,16 +680,20 @@
 %3C/Text%3E%0A
+    
   %3C/Card
@@ -705,10 +705,20 @@
 er%3E%0A
-);
+    );%0A  %7D%0A%7D
 %0A%0AEm

make EmptyCard a stateful component