import React, { useMemo } from "react";

// SortedNumbersDemo.jsx
// Single-file React component demo that shows numbers 1..25 sorted in a responsive grid.
// Uses Tailwind classes for styling. Default export a React component.

export default function SortedNumbersDemo() {
  const numbers = useMemo(() => Array.from({ length: 25 }, (_, i) => i + 1), []);

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-6">
      <div className="max-w-4xl mx-auto">
        <header className="mb-6">
          <h1 className="text-2xl font-extrabold">Sorted Numbers Demo — 1 to 25</h1>
          <p className="text-sm text-slate-600">Grid showing numbers in ascending order.</p>
        </header>

        <main>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
            {numbers.map((n) => (
              <div
                key={n}
                className="flex items-center justify-center h-24 rounded-2xl shadow-md bg-white text-slate-800"
              >
                <div className="text-center">
                  <div className="text-xl font-bold">{n}</div>
                  <div className="text-xs text-slate-600">Number</div>
                </div>
              </div>
            ))}
          </div>
        </main>

        <footer className="mt-6 text-sm text-slate-500">
          Numbers are displayed sorted from 1 to 25.
        </footer>
      </div>
    </div>
  );
}