Header Branding Glass

1// ========================================
2// HEADER BRANDING GLASS - SECTION COMPONENT
3// Header branding with logo and subtitle
4// Level 4: Section (extracted from HeaderNavGlass)
5// ========================================
6 
7import { forwardRef, type HTMLAttributes, type CSSProperties } from 'react';
8import { type LucideIcon } from 'lucide-react';
9import { cn } from '@/lib/utils';
10import { IconButtonGlass } from '../atomic/icon-button-glass';
11import '@/glass-theme.css';
12 
13export interface HeaderBrandingGlassProps extends HTMLAttributes<HTMLDivElement> {
14  /** Logo icon component */
15  readonly logoIcon: LucideIcon;
16  /** Main title */
17  readonly title: string;
18  /** Subtitle (hidden on mobile) */
19  readonly subtitle?: string;
20  /** Logo click handler */
21  readonly onLogoClick?: () => void;
22  /** Logo aria label */
23  readonly logoAriaLabel?: string;
24}
25 
26export const HeaderBrandingGlass = forwardRef<HTMLDivElement, HeaderBrandingGlassProps>(
27  (
28    {
29      logoIcon,
30      title,
31      subtitle,
32      onLogoClick,
33      logoAriaLabel = 'Home',
34      className,
35      ...props
36    },
37    ref
38  ) => {
39    const titleStyles: CSSProperties = {
40      color: 'var(--text-primary)',
41    };
42 
43    return (
44      <div
45        ref={ref}
46        className={cn('flex items-center gap-4', className)}
47        {...props}
48      >
49        <IconButtonGlass
50          icon={logoIcon}
51          aria-label={logoAriaLabel}
52          onClick={onLogoClick}
53          variant="gradient"
54          size="md"
55        />
56        <div className="flex flex-col sm:flex-row sm:items-center sm:gap-2">
57          <span className="font-semibold text-base md:text-lg" style={titleStyles}>
58            {title}
59          </span>
60          {subtitle && (
61            <span
62              className="hidden md:inline text-sm"
63              style={{ color: 'var(--text-secondary)' }}
64            >
65              · {subtitle}
66            </span>
67          )}
68        </div>
69      </div>
70    );
71  }
72);
73 
74HeaderBrandingGlass.displayName = 'HeaderBrandingGlass';