#3.3 Optional Props

import styled from "styled-components"

**interface** ContainerProps {
bgColor: string;
}

const Container = styled.div**<ContainerProps>**`
width: 200px;
height: 200px;
background-color: ${props => props.bgColor}
`;

// 속성 맨끝에 ?을 붙이면 required이 아니라 optional 된다.

interface CircleProps {
    bgColor: string;
    borderColor?:string;
}


function Circle({ bgColor, borderColor, text = "default text" }: CircleProps) {
    return <Container bgColor={bgColor} borderColor={borderColor ?? bgColor}>{text}</Container>
}

export default Cirle


interface PlayerShape {
    name: string;
    age: number;

}
const sayHello = (playerObj: PlayerShape) => `Hello ${playerObj.name} you are ${playerObj.age} years old.`

sayHello({ name: "eunajae", age: 28 })
sayHello({ name: "wonbin", age: 22 })