/**
 * Module: {{ dashboard_name }} root component
 * Description: Main dashboard UI — uses SDK hooks for Hub integration
 *
 * @implements docs/dashboards/sdk.md#useHuitzo
 */

import { useState } from 'react';
import { useHuitzo } from '@huitzo/dashboard-sdk-react';
import './App.css';

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

  return (
    <div className="container">
      <h1>{{ dashboard_name }}</h1>
      <p>A Huitzo Dashboard</p>
      <p className="user-info">
        Logged in as: {user?.email ?? 'loading...'}
      </p>

      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>

      <p>
        Edit <code>src/App.tsx</code> to start building your dashboard.
      </p>
    </div>
  );
}
