"use client";

import { GitBranch } from "lucide-react";
import { useProfile } from "../context/ProfileContext";

export function Stats() {
  const { projects, loading } = useProfile();

  return (
    <section className="mx-auto w-full max-w-5xl px-4">
      <div className="grid grid-cols-1 gap-4 sm:max-w-xs">
        <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
          <div className="mb-3 flex items-center justify-between">
            <span className="text-sm text-gray-400">Projects</span>
            <GitBranch className="h-4 w-4 text-gray-500" />
          </div>
          <p className="text-3xl font-bold text-white">
            {loading ? "—" : projects.length}
          </p>
          <p className="mt-1 text-xs text-gray-500">and many more private ones</p>
        </div>
      </div>
    </section>
  );
}
