Career Stats Header Glass

1// ========================================
2// CAREER STATS HEADER GLASS - COMPOSITE COMPONENT
3// Career statistics header with total counts
4// Level 3: Composite (extracted from CareerStatsGlass)
5// ========================================
6 
7import { forwardRef, type HTMLAttributes, type CSSProperties } from 'react';
8import { TrendingUp, Code, GitPullRequest, FolderGit2 } from 'lucide-react';
9import { cn } from '@/lib/utils';
10import '@/glass-theme.css';
11 
12export interface CareerStatsHeaderGlassProps extends HTMLAttributes<HTMLDivElement> {
13  /** Total commits count */
14  readonly totalCommits: number;
15  /** Total pull requests count */
16  readonly totalPRs: number;
17  /** Total repositories count */
18  readonly totalRepos: number;
19  /** Header title */
20  readonly title?: string;
21  /** Stats wrap on mobile */
22  readonly wrapStats?: boolean;
23}
24 
25export const CareerStatsHeaderGlass = forwardRef<
26  HTMLDivElement,
27  CareerStatsHeaderGlassProps
28>(
29  (
30    {
31      totalCommits,
32      totalPRs,
33      totalRepos,
34      title = 'Career Stats',
35      wrapStats = true,
36      className,
37      ...props
38    },
39    ref
40  ) => {
41    const titleStyles: CSSProperties = {
42      color: 'var(--text-primary)',
43    };
44 
45    const accentStyles: CSSProperties = {
46      color: 'var(--text-accent)',
47    };
48 
49    const statsStyles: CSSProperties = {
50      color: 'var(--text-secondary)',
51    };
52 
53    return (
54      <div ref={ref} className={cn('mb-4', className)} {...props}>
55        <h3
56          className="font-semibold flex items-center gap-2 mb-1"
57          style={titleStyles}
58        >
59          <TrendingUp className="w-5 h-5" style={accentStyles} />
60          {title}
61        </h3>
62        <p
63          className={cn(
64            'text-sm flex items-center gap-2',
65            wrapStats && 'flex-wrap'
66          )}
67          style={statsStyles}
68        >
69          <span className="flex items-center gap-1">
70            <Code className="w-4 h-4" />
71            {totalCommits.toLocaleString()} commits
72          </span>
73          <span>·</span>
74          <span className="flex items-center gap-1">
75            <GitPullRequest className="w-4 h-4" />
76            {totalPRs} PRs
77          </span>
78          <span>·</span>
79          <span className="flex items-center gap-1">
80            <FolderGit2 className="w-4 h-4" />
81            {totalRepos} repos
82          </span>
83        </p>
84      </div>
85    );
86  }
87);
88 
89CareerStatsHeaderGlass.displayName = 'CareerStatsHeaderGlass';