text: import React, { Fragment } from 'react';
  import { PieChart } from 'react-minimal-pie-chart';
  import intertops from '../../../../../img/intertops.png';
  
  
  const Feb_1_21_HornetsHeat = () => {
  
  
  	const dataMock = [
    	{ title: 'CHR 42%', value: 42, color: 'rgb(26, 21, 92)' },
    	{ title: 'MIA 58%', value: 58, color: 'rgb(139, 27, 49)' },
  	];
  	const dataEspn = [
    	{ title: 'CHR 34.8%', value: 34.8, color: 'rgb(26, 21, 92)' },
    	{ title: 'MIA 65.2%', value: 65.2, color: 'rgb(139, 27, 49)' },
  	];
  	const dataMock2 = [
    	{ title: 'Under 47%', value: 47, color: 'rgb(26, 21, 92)' },
    	{ title: 'Over 53%', value: 53, color: 'rgb(139, 27, 49)' },
  	];
  
  
    return (
      <div style={{textAlign: 'center', margin: '60px 0px'}}>
        <div style={{fontSize: '40px', fontWeight: '700', marginBottom: '40px'}}>
          Charlotte Hornets vs Miami Heat
        </div>
  	  	<div>
  	      <div class='leftScorePanel' style={{display: 'inline-block', verticalAlign: 'top'}}>
  	      	<div style={{fontWeight: '700'}}>Charlotte Hornets</div>
  	      	<div style={{fontWeight: '700'}}>9-11 (11-9) ATS</div>
  	      </div>
  	      <div class='middleScorePanel' style={{}}>
  	      	<div class='location'>
  	      		<div>February 01, 2021, 7:30 PM ET</div>
  	      		<div>American Airlines Arena</div>
  	      	</div>
  	      	<div>Predicted Score</div>
  	      	<div style={{marginTop: '40px', height: '100px'}}>
  	      		<div class='predictedScore' style={{display: 'inline-block', float: 'left', fontWeight: '700'}} >109.9</div>
  	      		<div class='predictedScore' style={{display: 'inline-block', float: 'right', fontWeight: '700'}} >112.3</div>
  	      	</div>
  	      </div>
  	      <div class='rightScorePanel' style={{display: 'inline-block', verticalAlign: 'top'}}>
  	      	<div style={{fontWeight: '700'}}>Miami Heat</div>
  	      	<div style={{fontWeight: '700'}}>7-12 (6-12-1) ATS</div>
  	      </div>
  	    </div>
  	    <div class='mobileMiddleScorePanel' style={{marginTop: '40px'}}>
  	      	<div class='location'>
  	      		<div>February 01, 2021, 7:30 PM ET</div>
  	      		<div>American Airlines Arena</div>
  	      	</div>
  	      	<div>Predicted Score</div>
  	      	<div style={{marginTop: '40px', height: '100px'}}>
  	      		<div class='predictedScore' style={{display: 'inline-block', float: 'left', fontWeight: '700'}} >109.9</div>
  	      		<div class='predictedScore' style={{display: 'inline-block', float: 'right', fontWeight: '700'}} >112.3</div>
  	      	</div>
  	      </div>
  	    <div style={{marginTop: '0px', fontSize: '20px', width: '375px', margin: 'auto'}}>
      		<div style={{fontSize: '24px', fontWeight: '700'}}>
      			Model Record
      		</div>
      		<div style={{height: '100px', paddingTop: '20px', width: '375px', margin: 'auto'}}>
      			<div class='text' style={{float:'left'}}>
      				Spread Record: 3-3
      			</div>
      			<div class='text' style={{float:'right'}}>
      				O/U Record: 4-2
      			</div>
      		</div>
      	</div>
  	    <div style={{display: 'inline-block', marginTop: '20px', verticalAlign: 'top'}}>
  	    	<div style={{width: '280px', margin: '0px 20px'}}>
  	  			<div style={{fontSize: '24px', fontWeight: '700', marginBottom: '20px'}}>Spread Consensus <br /> MIA -6.5</div>
  	  			<PieChart
  	  				style={{height: '200px'}}
  			      data={dataMock}
  			      lineWidth={20}
  			      paddingAngle={18}
  			      rounded
  			      label={({ dataEntry }) => dataEntry.title}
  			      labelStyle={(index) => ({
  			        fill: dataMock[index].color,
  			        fontSize: '7px',
  			        fontFamily: 'sans-serif',
  			        fontWeight: '700' 
  			      })}
  			      labelPosition={30}
  			    />
  	  		</div>
  	  	</div>
  	  	<div style={{display: 'inline-block', marginTop: '20px', verticalAlign: 'top'}}>
  	    	<div style={{width: '280px', margin: '0px 20px'}}>
  	  			<div style={{fontSize: '24px', fontWeight: '700', marginBottom: '20px'}}>ESPN Prediction <br /> <br /></div>
  	  			<PieChart
  	  				style={{height: '200px'}}
  			      data={dataEspn}
  			      lineWidth={20}
  			      paddingAngle={18}
  			      rounded
  			      label={({ dataEntry }) => dataEntry.title}
  			      labelStyle={(index) => ({
  			        fill: dataEspn[index].color,
  			        fontSize: '7px',
  			        fontFamily: 'sans-serif',
  			        fontWeight: '700' 
  			      })}
  			      labelPosition={30}
  			    />
  	  		</div>
  	  	</div>
    		<div style={{marginTop: '20px', display: 'inline-block', verticalAlign: 'top'}}>
    		  <div style={{width: '280px', margin: '0px 20px'}}>
  	  			<div style={{fontSize: '24px', fontWeight: '700', marginBottom: '20px'}}>Total Consensus <br /> 217 </div>
  	  			<PieChart
  	  				style={{height: '200px'}}
  			      data={dataMock2}
  			      lineWidth={20}
  			      paddingAngle={18}
  			      rounded
  			      label={({ dataEntry }) => dataEntry.title}
  			      labelStyle={(index) => ({
  			        fill: dataMock2[index].color,
  			        fontSize: '7px',
  			        fontFamily: 'sans-serif',
  			        fontWeight: '700',
  			      })}
  			      labelPosition={30}
  			    />
  	  		</div>
    		</div>
  	    <div style={{marginTop: '40px'}}>
  	    	<div style={{display: 'inline-block', width: '300px'}}>
  	    	  <div style={{paddingTop: '20px', marginBottom: '20px', fontSize: '24px', fontWeight: '700'}}>Best CHR Spread</div>
  	    	  <a href="https://link.intertops.eu/c/408817/" target="_blank" >
  
  	    	  	<img style={{width: '200px', borderRadius: '8px'}} src={intertops} />
  	    	  	<div style={{marginTop: '6px', fontWeight: '700' , color: 'green'}}>
  	    	  		-110
  	    	  	</div>
  	    	  </a>
  
  	    	  <div style={{paddingTop: '20px', marginBottom: '20px', fontSize: '24px', fontWeight: '700'}}>Best CHR Moneyline</div>
  	    	  <a href="https://link.intertops.eu/c/408817/" target="_blank" >
  
  	    	  	<img style={{width: '200px', borderRadius: '8px'}} src={intertops} />
  	    	  	<div style={{marginTop: '6px', fontWeight: '700' , color: 'green'}}>
  	    	  		+200
  	    	  	</div>
  	    	  </a>
  	    	</div>
  	    	<div style={{display: 'inline-block'}}>
  	    		<div>
  	    		  <div style={{marginBottom: '20px', fontSize: '24px', paddingTop: '20px', fontWeight: '700'}}>Best Over (217)</div>
  	    			<a href="https://link.intertops.eu/c/408817">
  	    	  		<img style={{width: '200px', borderRadius: '8px'}} src={intertops} />
  	    	  		<div style={{marginTop: '6px', fontWeight: '700' , color: 'green'}}>
  	    	  			-110
  	    	  		</div>
  	    	  	</a>
  	    	  </div>
  	    	  <div style={{}}>
  	    	  	<div style={{paddingTop: '20px', marginBottom: '20px', fontSize: '24px', fontWeight: '700'}}>Best Under (217)</div>
  		    	  <a href="https://link.intertops.eu/c/408817">
  		    	  	<img style={{width: '200px', borderRadius: '8px'}} src={intertops} />
  		    	  	<div style={{marginTop: '6px', fontWeight: '700' , color: 'green'}}>
  	    	  			-110
  	    	  		</div>
  		    	  </a>
  		    	 </div>
  
  	    	</div>
  	    	<div style={{display: 'inline-block', width: '300px'}}>
  	    	  <div style={{marginBottom: '20px', paddingTop: '20px',fontSize: '24px', fontWeight: '700'}}>Best MIA Spread</div>
  	    	  
  	    	  <a href="https://link.intertops.eu/c/408817/" target="_blank" >
  
  	    	  	<img style={{width: '200px', borderRadius: '8px'}} src={intertops} />
  	    	  	<div style={{marginTop: '6px', fontWeight: '700' , color: 'green'}}>
  	    	  		-110
  	    	  	</div>
  	    	  </a>
  	    	  <div style={{paddingTop: '20px', marginBottom: '20px', fontSize: '24px', fontWeight: '700'}}>Best MIA Moneyline</div>
  	    	  <a href="https://link.intertops.eu/c/408817">
  	    	  	<img style={{width: '200px', borderRadius: '8px'}} src={intertops} />
  	    	  	<div style={{marginTop: '6px', fontWeight: '700' , color: 'green'}}>
  	    	  		-240
  	    	  	</div>
  	    	  </a>
  	    	  
  	    	</div>
  	    </div>
      </div>
    );
  };
  
  export default Feb_1_21_HornetsHeat;