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

const Title = styled.h1`
    color: #aaecf0;
`
const Section = styled.div`
    background-color: #aac9f0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-radius: 15px;
`
const Button = styled.button`
    background-color: white;
    display: flex;
    justify-content: center;
    padding: 5px;
    margin: 5px;
    border-radius: 15px;
`

const Content = () => {
    return (
        <Section>
            <Title>💅🏻 Section</Title>
            <Button>Click me</Button>
            <Button>Click me</Button>
        </Section>
    )
}

export default Content

//Mini Challenge
// In the same way that we added a primary and secondary prop to the two Buttons, can 
// you add two circles, or ‘Icons’ below the Buttons, but make them as a functional 
//component that we import into the Content Component. I want the primary Icon to 
//be Green and the secondary to be Yellow.