'use client';

import { useContext } from 'react';

import { UserContext } from '@/context/user';

import Badge from '@/ui/Badge';

export default function Page() {
  const { data: me } = useContext(UserContext);
  return (
    <section className="flex h-full w-full flex-col space-y-4">
      <header className="flex flex-col">
        <h1 className="text-xl font-semibold">Mes badges</h1>
        <p className="text-muted">
          Vos badges sont affichés ici, vous pouvez les partager avec vos amis
        </p>
      </header>
      <main className="flex flex-col justify-between space-x-0 space-y-4">
        <div className="flex space-x-2">
          {me?.badges ? (
            me?.badges.map((badge, i) => (
              <Badge
                key={i}
                name={badge.name}
                src={badge.logo || '/assets/badges/java.png'}
                alt={badge.name}
                level={badge.level}
              />
            ))
          ) : (
            <p className="text-muted">Aucun badge</p>
          )}
        </div>
      </main>
    </section>
  );
}