1  'use client'
 2  
 3  import type { ReactNode } from 'react'
 4  import { ChevronDown } from 'lucide-react'
 5  
 6  interface Props {
 7    open: boolean
 8    onToggle: () => void
 9    summary?: string | null
10    badges?: string[]
11    children: ReactNode
12  }
13  
14  export function AdvancedSettingsSection({ open, onToggle, summary, badges = [], children }: Props) {
15    return (
16      <section className="mb-8 rounded-[20px] border border-white/[0.06] bg-surface/70">
17        <button
18          type="button"
19          onClick={onToggle}
20          className="flex w-full items-start justify-between gap-4 rounded-[20px] bg-transparent px-5 py-5 text-left transition-all hover:bg-white/[0.02] sm:px-6"
21          style={{ fontFamily: 'inherit' }}
22        >
23          <div className="min-w-0">
24            <div className="flex flex-wrap items-center gap-2">
25              <h3 className="font-display text-[17px] font-700 tracking-[-0.02em] text-text">Advanced Settings</h3>
26              {summary && (
27                <span className="rounded-full border border-white/[0.08] bg-white/[0.03] px-2.5 py-1 text-[10px] font-700 uppercase tracking-[0.08em] text-text-3">
28                  {summary}
29                </span>
30              )}
31            </div>
32            <p className="mt-1 text-[13px] leading-[1.6] text-text-3/75">
33              Power-user controls for routing, runtime behavior, and expert overrides.
34            </p>
35            {badges.length > 0 && (
36              <div className="mt-3 flex flex-wrap gap-2">
37                {badges.slice(0, 5).map((badge) => (
38                  <span
39                    key={badge}
40                    className="rounded-[9px] border border-white/[0.08] bg-white/[0.03] px-2.5 py-1 text-[11px] font-600 text-text-3"
41                  >
42                    {badge}
43                  </span>
44                ))}
45              </div>
46            )}
47          </div>
48          <span className="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[12px] border border-white/[0.06] bg-white/[0.03] text-text-3">
49            <ChevronDown className={`size-4 transition-transform duration-200 ${open ? 'rotate-180' : ''}`} />
50          </span>
51        </button>
52        {open && (
53          <div className="border-t border-white/[0.04] px-5 pb-5 pt-4 sm:px-6 sm:pb-6">
54            {children}
55          </div>
56        )}
57      </section>
58    )
59  }