import React, { useState } from 'react'
import { EmptyBlock } from '../components/EmptyBlock'
import { Container } from '../components/Container'
import { Paragraph, Title } from 'components/Typography'
import styled from 'styled-components'
import { ResultItem } from '../components/ResultItem'
import { Breakpoint } from '../../../components/Breakpoint'

const StyledMain = styled.div`
  padding-top: 43px;

  ${props => props.theme.breakpoints.down('s')} {
	padding-top: 23px;
  }
`
export const History = () => {
	const [testLength] = useState(2)
	const [infectionNum] = useState(3)
	return (
		<Container>
			<Breakpoint s up>
				<Title level={0}>Test History</Title>
			</Breakpoint>
			<Breakpoint s down>
				<Title level={3} style={{ marginBottom: 10 }}>Test History</Title>
			</Breakpoint>
			<Paragraph>{testLength === 0 ? 'You do not have any past tests.' : `You have completed ${testLength} health tests, covering ${infectionNum} different infections.`} </Paragraph>
			<StyledMain>
				{testLength === 0 ? <EmptyBlock /> : (
					<>
						<ResultItem />
						<ResultItem />
					</>
				)}
			</StyledMain>
		</Container>
	)
}
