id: string;

"123";
"user_456";
"550e8400-e29b-41d4-a716-446655440000";

name: string;

"Juan";
"María";

surname?: string

"Pérez García";
"López Martínez";

phone: string;

"+1234567890";
"+34612345678";

email?: string

"juan@example.com";

roles: string[]

["user"][("user", "admin")][("customer", "premium")];

interface User {
  id: string;
  name: string;
  surname?: string;
  phone: string;
  email?: string;
  roles: string[];

  // Propiedades opcionales adicionales
  avatar?: string;
  foto?: string;
  createdAt?: string;
  updatedAt?: string;

  // Campos personalizados de tu DB
  [key: string]: any;
}

import { usePinAuth } from "@camarauth/sdk/react";

function UserProfile() {
  const auth = usePinAuth({
    apiUrl: "http://localhost:3001",
    whatsappNumber: "+1234567890",
  });

  if (!auth.user) {
    return <div>No autenticado</div>;
  }

  const { user } = auth;

  return (
    <div className="user-profile">
      <h2>
        {user.name} {user.surname}
      </h2>
      <p>Teléfono: {user.phone}</p>
      {user.email && <p>Email: {user.email}</p>}

      <div className="roles">
        {user.roles.map((role) => (
          <span key={role} className="role-badge">
            {role}
          </span>
        ))}
      </div>
    </div>
  );
}

auth.onSuccess = (user) => {
  // Guardar usuario
  localStorage.setItem("user", JSON.stringify(user));

  // Guardar token si existe
  if (user.token) {
    localStorage.setItem("token", user.token);
  }
};

// Recuperar usuario
const savedUser = JSON.parse(localStorage.getItem("user") || "null");

function hasRole(user: User, role: string): boolean {
  return user.roles.includes(role);
}

// Uso
if (hasRole(user, "admin")) {
  // Mostrar panel de admin
}