import React, { FC } from 'react'
import styled from 'styled-components'
import Icon from '@ant-design/icons'
import { Tag } from 'components/Tag'
import { Paragraph } from 'components/Typography'
import { Button } from 'components/Button'
import { ReactComponent as HeartSvg } from 'icons/heart.svg'
import { ReactComponent as DownloadSvg } from 'icons/download.svg'

const StyledContent = styled.div`
  padding: 4px 14px 9px;
  background: #FFFFFF;
  box-shadow: 2px 1px 4px 1px rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  margin-bottom: 22px;

  ${props => props.theme.breakpoints.down('s')} {
	padding-top: 16px;
	margin-bottom: 25px;
	padding-bottom: 10px;
  }
`
const StyledItem = styled.div`
  margin-bottom: 10px;
  margin-left: 1px;
  margin-right: 1px;
  background: #F5F5F5;
  border: 0.5px solid #FF5200;
  border-radius: 7px;
  padding: 16px;
  display: flex;
  flex-direction: row;

  ${props => props.theme.breakpoints.down('s')} {
	padding-left: 14px;
	padding-right: 7px;
  }
`

const StyledName = styled.div`
  flex: auto;
`
const StyledTagContent = styled.div`
  padding-left: 16px;
  flex: 0 0 auto;

  ${props => props.theme.breakpoints.down('s')} {
	padding-left: 8px;

  }
`

const StyledTitleContent = styled.div`
  display: flex;
  flex-direction: row;
  padding-bottom: 8px;

  ${props => props.theme.breakpoints.down('s')} {
	padding-bottom: 13px;
  }
`
const StyledTitleMain = styled.div`
  flex: auto;
  display: flex;
  flex-direction: row;
`
const StyledIcon = styled(Icon)`
  width: 16px;
  height: 14px;
  padding-top: 5px;
  display: inline-block;

  ${props => props.theme.breakpoints.down('s')} {
	padding-top: 6px;
  }
`
const StyledTitleInfo = styled.div`
  padding-left: 5px;
  flex: 1;
`
const StyledParagraph = styled(Paragraph)``
const StyledDownloadButton = styled(Button)`
  height: 25px;
  line-height: 25px;
  font-weight: 400;
  font-size: 12px;
  width: 108px;
  border-radius: 8px;
`
const StyledDownloadContent = styled.div`
  padding-left: 18px;
  padding-top: 11px;
  flex: 0 0 auto;

  ${props => props.theme.breakpoints.down('s')} {
	padding-top: 15px;
  }
`

export interface ResultItem {
}

export const ResultItem: FC<ResultItem> = () => {
	return (
		<StyledContent>
			<StyledTitleContent>
				<StyledTitleMain>
					<StyledIcon component={HeartSvg} />
					<StyledTitleInfo>
						<StyledParagraph>Critical 2 (Kit ID: xxxxxx)</StyledParagraph>
						<StyledParagraph level={2}>Report Date: 05/13/2023</StyledParagraph>
					</StyledTitleInfo>
				</StyledTitleMain>
				<StyledDownloadContent>
					<StyledDownloadButton>
						Download
						<Icon component={DownloadSvg} />
					</StyledDownloadButton>
				</StyledDownloadContent>
			</StyledTitleContent>
			<StyledItem>
				<StyledName>Infection Name</StyledName>
				<StyledTagContent><Tag>Not Detected</Tag></StyledTagContent>
			</StyledItem>
		</StyledContent>
	)
}
