import React from "react";
import "./App.css";
import Button from '@mui/material/Button';
import counterModuleStyle from './app.module.css'
// .title을 중복되지 않는 이름으로 바꾸고 그 값을 counterModule.Style.title에 넣음
console.log(counterModuleStyle.title)

// console.log(counterModuleStyle.title)
//title:"app_title__43Gif" 출력

//https://mui.com/
//ui를 코드 한줄로 만들 수 있음 짱이다

//@ts-ignore
type CounterProps={
title:string;
initValue:number;
};
//props에 있어야 하는 프로퍼티들을 강제로 지정. title과 initvalue가 없으면 에러발생
function Counter({title,initValue}:CounterProps){
//반드시 대문자로 시작해야 함
// console.log('🐯,props',props)
// console.log(typeof props.initValue)
//props는 counter 함수의 첫번째 파라미터로, title의 속성을 가져옴
//initValue는 string으로 들어감

//props는 객체.

// const countState=React.useState(props.initValue);
//실제 사용되지 않는 변수명을 만들음, 가독성을 위해 구조분해 할당으로 수정!
const [count,setCount]=React.useState(initValue)

// console.log(countState)
//배열이 출력된다. 첫번째 원소는 undefined,두번째 원소는 함수.
// let count=countState[0];
//인자로 값을 주면 배열의 첫번째 요소가 그 값이 됨
// let setCount=countState[1]
//함수

function up(){

// props.initValue++;
//에러 발생! 회장님 말에 신입사원이 말대꾸? 같은 시츄.
//App 함수에서 initValue를 10으로 줬는데 up이 ++를 실행? 어림도 없지 에러발생
//props 값은 Counter 함수 내에서 readonly다. 아래에서 수정할 수 없다.
setCount(count+1);

}
const layoutStyle={
border:'5px solid black',
backgroundColor:'pink'
}
// 인라인방식= 다른 사람이 만든 컴포넌트에 영향을 주지 않음, 재사용은 어려움
return(
//

Counter

// 🐯0
//하나의 단일태그 안에 있지 않아서 오류 발생, 위에 div로 묶어주면 해결
//div 아니고 빈태그 <> </>로 해도 됨

// {/* <div style={//객체라는 뜻의 중괄호{//값이라는 뜻의 중괄호    border:'5px solid black',
// backgroundColor:'pink'}}> */}
// {/* 중간의 {}는 객체라는 뜻임 */}
// <div style={layoutStyle}>
<div>
{/* 이것도 인라인방식 */}
<h1 className={counterModuleStyle.title}> {title}</h1>
{/* 백틱 안에 쓰던 거랑 비슷하게 생겼다. */}

<button className='btn' onClick={up}>🐯</button>{count}
<Button variant='contained' size='small'>🐯</Button>
{/* vscode내 quick fix의 단축키: ctrl+. 전구 켜짐!*/}
{/* 실행이 안된다면 quickfix를 사용해서 import를 해줍시다 */}
</div>

)
}

  //initValue 뒤에 ={}에 대한 주석임

// {/ js의 데이터타입을 따르게 하기 위해 중괄호 {} 사용 /}
// {/ title로 이름을 주고 싶음 /}
function App(){
return(

<div>
  <Grid container spacing={1}>
    {/* 1=>8px, 8px만큼의 간격을 준다. */}
  <Grid item xs={12} md={4}> 
  {/* xs=extrasmall,0px, sm:small,600px,  */}
  {/* https://mui.com/material-ui/customization/breakpoints/ 참고 */}
    <Counter title='참여자 카운터'initValue={0}></Counter></Grid>

  <Grid item xs={12} sm={6}> <<Counter title="불면증 카운터" initValue={20}></Counter></Grid>
  {/* 900px보다 크면 4분할에서 위로 올라감  */}
  </Grid>
</div>

)
}

export default App;