Ai Card Glass

1/**
2 * AICardGlass Component
3 *
4 * AI-themed interactive card with feature list and generate button.
5 * Designed for AI analysis, report generation, and ML-powered features.
6 *
7 * ## Features
8 * - AI-themed Sparkles icon with accent color
9 * - Customizable features list with checkmark icons (default: 3 items)
10 * - Generate button with Zap icon for action trigger
11 * - Estimated time display with Clock icon
12 * - Hover lift effect via InteractiveCard primitive
13 * - Responsive sizing (full-width on mobile, fixed width on desktop)
14 * - Theme-aware accent colors for icons and title
15 *
16 * ## CSS Variables
17 * - `--ai-card-bg` - Card background color
18 * - `--ai-card-border` - Card border color
19 * - `--ai-card-hover-glow` - Glow effect on hover
20 * - `--text-accent` - Accent color for title and Sparkles icon
21 * - `--text-secondary` - Description text color
22 * - `--text-muted` - Feature list and time text color
23 * - `--status-online` - Green checkmark color for features
24 *
25 * @example Basic usage
26 * ```tsx
27 * import { AICardGlass } from 'shadcn-glass-ui'
28 *
29 * function Dashboard() {
30 *   return (
31 *     <AICardGlass
32 *       onGenerate={() => console.log('Generating report...')}
33 *     />
34 *   )
35 * }
36 * ```
37 *
38 * @example Custom features and timing
39 * ```tsx
40 * <AICardGlass
41 *   features={[
42 *     'Security analysis',
43 *     'Performance metrics',
44 *     'Optimization suggestions',
45 *     'Dependency audit',
46 *   ]}
47 *   estimatedTime="~45 seconds"
48 *   onGenerate={handleGenerateReport}
49 * />
50 * ```
51 *
52 * @example With custom styling
53 * ```tsx
54 * <AICardGlass
55 *   className="lg:w-80"
56 *   onGenerate={() => setIsGenerating(true)}
57 * />
58 * ```
59 *
60 * @example Without generate handler
61 * ```tsx
62 * <AICardGlass
63 *   features={['Feature detection', 'Pattern recognition', 'Recommendations']}
64 * />
65 * // Button is still displayed but onClick is undefined
66 * ```
67 *
68 * @accessibility
69 * - ButtonGlass has built-in keyboard navigation (Enter/Space)
70 * - Sparkles icon includes implicit decorative role
71 * - High contrast icons (Sparkles, Check, Zap, Clock) for visual clarity
72 * - Responsive text sizing (2xs on mobile, xs on desktop)
73 * - Feature list uses semantic `<ul>` and `<li>` elements
74 *
75 * @since v1.0.0
76 */
77 
78import { forwardRef } from 'react';
79import { Sparkles, Check, Zap, Clock } from 'lucide-react';
80import { cn } from '@/lib/utils';
81import { ButtonGlass } from '../ui/button-glass';
82import { InteractiveCard } from '../primitives';
83import '@/glass-theme.css';
84 
85/**
86// … truncated