/**
 * Stub App component. Replace this with whatever your app actually does.
 *
 * The counter exists so the template ships with something visibly interactive
 * out of the box — handy for sanity-checking that React mounted, that HMR
 * works, and that the build pipeline produces a working bundle.
 *
 * STYLING: use Tailwind utility classes in `className` for layout/spacing, and
 * the ready-made primitives (`.card`, `.btn`, `.btn-primary`, `.muted`, …)
 * from `src/styles/theme.css` for common building blocks. See that file to
 * re-skin via design tokens or add new primitives.
 */

import { useState } from 'react';

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

  return (
    <div className="page">
      <header className="stack">
        <h1>{{APP_NAME}}</h1>
        <p className="muted">Edit src/App.tsx to get started</p>
      </header>

      <div className="card row justify-between">
        <span className="muted">Count</span>
        <span className="text-2xl font-semibold tabular-nums">{count}</span>
      </div>

      <div className="row">
        <button className="btn btn-primary" onClick={() => setCount(c => c + 1)}>
          Increment
        </button>
        <button className="btn" onClick={() => setCount(0)} disabled={count === 0}>
          Reset
        </button>
      </div>
    </div>
  );
}