'use client';

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

import Badge from '@/components/ui/Badge';
import { Separator } from '@/components/ui/Separator';

export default function Page() {
  const { data: me, isLoading } = useUser();
  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>
      <Separator />
      <main className="flex flex-col justify-between space-x-0 space-y-4">
        <div className="flex space-x-2">
          {!isLoading && 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>
  );
}