import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 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 transition 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">
          Creative Counter
        </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-125 hover:bg-red-600 duration-300"
          >
            -
          </button>
          <div className="text-4xl font-semibold 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">
            {count}
          </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-125 hover:bg-green-600 duration-300"
          >
            +
          </button>
        </div>
      </div>
    </div>
  );
}