Trust Score Display Glass

1/**
2 * TrustScoreDisplayGlass Component
3 *
4 * Large animated trust score display with gradient text and pulsing animation.
5 * Extracted from TrustScoreCardGlass for reusability across layouts.
6 *
7 * ## Features
8 * - Large animated score number with gradient background
9 * - 3 size variants (sm, md, lg) with responsive text scales
10 * - Optional Target icon with accent color
11 * - Score/maxScore ratio format (e.g., "85 / 100")
12 * - Customizable title (default: "Overall Trust Score")
13 * - Theme-aware text colors (primary, accent, muted)
14 * - Pulsing animation (2s cycle, ease-in-out)
15 * - Centered horizontal layout with space-between alignment
16 *
17 * ## CSS Variables
18 * Uses theme text color variables (no component-specific variables):
19 * - `--text-primary` - Title text color
20 * - `--text-accent` - Target icon color
21 * - `--text-muted` - Max score text color
22 * - `--score-gradient` - Gradient background for score number
23 *
24 * @example Basic usage
25 * ```tsx
26 * import { TrustScoreDisplayGlass } from 'shadcn-glass-ui'
27 *
28 * function TrustDashboard() {
29 *   return (
30 *     <TrustScoreDisplayGlass score={85} />
31 *   )
32 * }
33 * ```
34 *
35 * @example With custom title and max score
36 * ```tsx
37 * <TrustScoreDisplayGlass
38 *   score={92}
39 *   maxScore={100}
40 *   title="Security Score"
41 *   size="lg"
42 * />
43 * ```
44 *
45 * @example Small size without icon
46 * ```tsx
47 * <TrustScoreDisplayGlass
48 *   score={78}
49 *   size="sm"
50 *   showIcon={false}
51 * />
52 * ```
53 *
54 * @example Large size with custom styling
55 * ```tsx
56 * <TrustScoreDisplayGlass
57 *   score={95}
58 *   maxScore={120}
59 *   title="Performance Score"
60 *   size="lg"
61 *   className="mb-6"
62 * />
63 * ```
64 *
65 * @accessibility
66 * - Score uses `bg-clip-text` with transparent text for gradient effect
67 * - High contrast ratio maintained via CSS variable colors
68 * - Target icon is decorative (no aria-label needed)
69 * - Semantic `<h2>` element for title (adjust as needed for heading hierarchy)
70 * - Animation respects system motion preferences when configured
71 *
72 * @since v1.0.0
73 */
74 
75import { forwardRef, type HTMLAttributes, type CSSProperties } from 'react';
76import { Target } from 'lucide-react';
77import { cn } from '@/lib/utils';
78import '@/glass-theme.css';
79 
80/**
81 * Props for TrustScoreDisplayGlass component.
82 *
83 * Extends standard div attributes with score display-specific props.
84 *
85 * @example
86 * ```tsx
87 * const props: TrustScoreDisplayGlassProps = {
88 *   score: 85,
89 *   maxScore: 100,
90 *   title: 'Overall Trust Score',
91 *   size: 'lg',
92// … truncated