import {AiOutlineGithub, AiOutlineLinkedin} from 'react-icons/ai'
import {Button, Container, FormControl, InputGroup} from 'react-bootstrap'

import React from 'react'
import styled from 'styled-components'

const Social = styled.div`
	display: flex;
	flex-direction: column;
	min-height: 50vh;
	padding: 5px;
`

const SocialIcons = styled.div`
	display: flex;
	width: 100%;
`

const CustomLink = styled.a`
	display: block;
	color: inherit;
	text-decoration: none;
	&:hover {
		color: inherit;
		text-decoration: none;
	}
`

const Icon = styled.div`
	flex: 1;
	text-align: center;
	margin-bottom: 20px;
	padding: 20px;
	background-color: #ebf2fa;
	border-radius: 11px;
	cursor: pointer;
	vertical-align: middle;
	background: #d6249f;
	${(props) => {
		if (props.label === 'instagram') {
			return 'background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);'
		} else if (props.label === 'github') {
			return 'background: linear-gradient(to top, #7dbbe6 0%,#00acee 100%); margin-right: 20px;'
		} else if (props.label === 'linkedin') {
			return 'background: linear-gradient(to top, #0e76a8 0%,#00acee 100%);'
		}
	}}
	box-shadow: 0px 3px 10px rgba(0,0,0,.25);
	color: #fff;
	& svg {
		flex: 1;
		height: 50px;
	}
`

const ButtonForm = styled.div`
	margin-top: 15px;
`

function SocialModal() {
	return (
		<Social>
			<Container>
				<SocialIcons>
					<Icon label='github'>
						<AiOutlineGithub size={35} />
						<CustomLink href='https://github.com/pranjaljain0' target='_blank'>
							@pranjaljain0
						</CustomLink>
					</Icon>
					<Icon label='linkedin'>
						<AiOutlineLinkedin size={35} />
						<CustomLink
							href='https://www.linkedin.com/in/pranjaljain0/'
							target='_blank'>
							@pranjaljain0
						</CustomLink>
					</Icon>
				</SocialIcons>

				<InputGroup className='mb-3'>
					<FormControl
						placeholder='Full name'
						aria-label='Name'
						aria-describedby='basic-addon1'
					/>
				</InputGroup>

				<InputGroup className='mb-3'>
					<FormControl
						placeholder='Email address'
						aria-label='Email'
						aria-describedby='basic-addon1'
					/>
				</InputGroup>

				<InputGroup>
					<FormControl
						as='textarea'
						aria-label='With textarea'
						placeholder='Write some description'
						style={{
							resize: 'none',
							height: 100,
						}}
					/>
				</InputGroup>

				<ButtonForm>
					<Button variant='outline-secondary' className='float-right'>
						Submit
					</Button>
				</ButtonForm>
			</Container>
		</Social>
	)
}

export default SocialModal