import { Show } from 'solid-js';
import { authState } from '~/lib/auth';

export default function DashboardProfilePage() {
  const rc = () => authState().runtime_config;

  return (
    <section class="dashboard-card">
      <h1>Profile</h1>
      <p class="dashboard-muted">Your active account details for this role.</p>

      <Show when={rc()} fallback={<p class="dashboard-muted">Loading profile...</p>}>
        <div class="kv-grid">
          <div><strong>Name:</strong> {rc()?.user?.full_name || '—'}</div>
          <div><strong>Email:</strong> {rc()?.user?.email || '—'}</div>
          <div><strong>Active Role:</strong> {rc()?.user?.active_role || rc()?.role || '—'}</div>
          <div><strong>Roles:</strong> {(rc()?.user?.roles || []).join(', ') || '—'}</div>
        </div>
      </Show>
    </section>
  );
}