import React, { useState } from "react";
export default function Counter(){
    const [counte, setCount] = useState(0);

    const increment = () => {
        setCount(counte + 1)
    }
    const decrement = () => {
        setCount(counte - 1)
    }

    return(
        <div 
            className="flex items-center justify-center h-screen bg-gradient-to-r from-indigo-500
            via-purple-500 to-pink-500">
            <div 
                className="bg-white p-10 rounded-3xl shadow-xl transform
                trasnsition duration-500 hover:scale-105">
                    <div 
                        className="text-center text-3xl font-extrabold text-transparent 
                        bg-clip-text bg-gradient-to-r from-pink-500 to-purple-500 mb-6">
                            Counter Machine
                    </div>
                    <div 
                        className="flex items-center justify-between space-x-6">
                            <button
                            onClick={decrement}
                            className="w-12 h-12 bg-red-400 text-white rounded-full
                            shadow-lg text-2xl font-bold flex items-center justify-center
                            transform transition hover:scale-105 hover:bg-red-600 duration-700">
                                &#8722;                                
                            </button>
                            <div 
                                className="text-4xl font-bold text-white flex justify-center items-center
                                w-20 h-20 bg-gradient-to-r from-indigo-300 to-purple-400 rounded-full
                                shadow-inner">
                                    {counte}
                            </div>
                            <button
                            onClick={increment}
                            className="w-12 h-12 bg-green-400 text-white rounded-full
                            shadow-lg text-2xl font-bold flex items-center
                            justify-center transform transition hover:scale-105 
                            hover:bg-green-600 duration-700">
                            &#43;
                        </button>
                    </div>

                </div>

        </div>
    )
}