import React, { useState } from "react";

export default function App() {
  // ✅ React + TypeScript : state typé
  const [count, setCount] = useState<number>(0);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      {/* ✅ TailwindCSS : stylisation */}
      <h1 className="text-3xl font-bold mb-6 text-blue-700">
        Counter Example
      </h1>

      <p className="text-xl mb-4">
        Current count: <span className="font-mono">{count}</span>
      </p>

      <div className="space-x-4">
        {/* ✅ React : gestion d'événements */}
        <button
          className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition"
          onClick={() => setCount(count + 1)}
        >
          Increment
        </button>

        <button
          className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition"
          onClick={() => setCount(0)}
        >
          Reset
        </button>
      </div>
    </div>
  );
}