import { useState } from "react"

export default function Counter() {
    const [count, setCount] = useState(0)
    return (
        <div className="not-prose w-full shadow-sm rounded-2xl p-10">
            <div className="w-full sm:w-1/2 mx-auto flex items-center justify-center flex-col gap-5 min-w-0">
                <h2>{count}</h2>
                <div className="flex flex-wrap justify-center gap-3 sm:gap-5">
                    <button className="btn btn-soft btn-primary" onClick={() => setCount(count + 1)}>+</button>
                    <button className="btn btn-soft btn-primary" onClick={() => setCount(count * 2)}>* 2</button>
                    <button className="btn btn-soft btn-primary" onClick={() => setCount(count - 1)}>-</button>
                    <button className="btn btn-soft btn-primary" onClick={() => setCount(count / 2)}>/ 2</button>
                    <button className="btn btn-soft btn-error" onClick={() => alert(count)}>출력!</button>
                </div>
            </div>
        </div>
    )
}