Flags Section Glass

1// ========================================
2// FLAGS SECTION GLASS COMPONENT
3// Expandable flags/warnings section
4// ========================================
5 
6import { forwardRef } from 'react';
7import { AlertTriangle, ChevronUp, ChevronDown } from 'lucide-react';
8import { cn } from '@/lib/utils';
9import { GlassCard } from '../ui/glass-card';
10import { FlagAlertGlass, type FlagType } from '../specialized/flag-alert-glass';
11import '@/glass-theme.css';
12 
13export interface FlagData {
14  readonly type: FlagType;
15  readonly title: string;
16  readonly description?: string;
17}
18 
19export interface FlagsSectionGlassProps extends React.HTMLAttributes<HTMLDivElement> {
20  readonly flags?: readonly FlagData[];
21  readonly expanded?: boolean;
22  readonly onToggle?: () => void;
23}
24 
25export const FlagsSectionGlass = forwardRef<HTMLDivElement, FlagsSectionGlassProps>(
26  ({ flags = [], expanded = false, onToggle, className, ...props }, ref) => {
27    return (
28      <GlassCard
29        ref={ref}
30        className={cn('w-full max-w-2xl', className)}
31        intensity="medium"
32        hover={false}
33        {...props}
34      >
35        <button
36          onClick={onToggle}
37          className="w-full p-3 md:p-4 flex items-center justify-between rounded-2xl"
38          style={{ color: 'var(--text-primary)' }}
39          type="button"
40          aria-expanded={expanded}
41        >
42          <div className="flex items-center gap-1.5 md:gap-2">
43            <AlertTriangle
44              className="w-4 h-4 md:w-5 md:h-5"
45              style={{ color: 'var(--status-away)' }}
46            />
47            <span className="font-medium text-sm md:text-base">{flags.length} flags detected</span>
48          </div>
49          {expanded ? (
50            <ChevronUp className="w-4 h-4 md:w-5 md:h-5" style={{ color: 'var(--text-muted)' }} />
51          ) : (
52            <ChevronDown className="w-4 h-4 md:w-5 md:h-5" style={{ color: 'var(--text-muted)' }} />
53          )}
54        </button>
55        {expanded && (
56          <div className="px-3 pb-3 md:px-4 md:pb-4 space-y-1.5 md:space-y-2">
57            {flags.map((flag, i) => (
58              <FlagAlertGlass
59                key={`flag-${i}`}
60                type={flag.type}
61                title={flag.title}
62                description={flag.description}
63              />
64            ))}
65          </div>
66        )}
67      </GlassCard>
68    );
69  }
70);
71 
72FlagsSectionGlass.displayName = 'FlagsSectionGlass';