import React, { FC } from 'react'
import styled from 'styled-components'
import { Modal, ModalProps } from '../../../components/Modal'
import { Title, Text, Paragraph } from '../../../components/Typography'

type Props = Pick<ModalProps, 'open'> & {
	onClose?: () => void
}

const StyledWrapper = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 366px;

  ${props => props.theme.breakpoints.up('s')} {
	justify-content: center;
  }
`
const StyledMain = styled.div`
  width: 100%;

  ${props => props.theme.breakpoints.up('s')} {
    width: 400px;
    padding-top: 16px;
  }

  ${props => props.theme.breakpoints.down('s')} {
    padding-top: 33px;
    padding-left: 4px;
    padding-right: 4px;
  }
`
const StyledTitle = styled(Title)`
  margin-bottom: 3px !important;

  ${props => props.theme.breakpoints.down('s')} {
    margin-bottom: 27px !important;
  }
`
export const ActivateGuide: FC<Props> = ({ onClose, ...props }) => {
	const handleClose = () => {
		onClose && onClose()
	}
	return (
		<Modal {...props} width={688} destroyOnClose onCancel={handleClose}>
			<StyledWrapper>
				<StyledMain>
					<StyledTitle>Can’t find your <Text inherit primary>activation code</Text>?</StyledTitle>
					<Paragraph level={2}>The activation code is located on the Kit ID Card in your home collection
						kit.</Paragraph>
				</StyledMain>
			</StyledWrapper>
		</Modal>
	)
}
