export interface HeaderConfig {
  textColor?: string       // Default: globalStyles.textColor || '#ffffff'
  accentColor?: string     // Default: globalStyles.accentColor || '#c5ff4a'
  hideBorder?: boolean     // Default: false
}

import { renderWidgetSvg, WidgetInstance, NormalizedGitHubData, GlobalStyles } from '@/engine'

const headerWidget: WidgetInstance = {
  instanceId: 'header_01',
  widgetId: 'header',
  name: 'Header',
  position: { x: 0, y: 0 },
  size: { width: 800, height: 90 },
  config: {
    accentColor: '#c5ff4a',
    textColor: '#ffffff',
  },
  locked: false,
  visible: true,
  zIndex: 1,
}

const svgOutput = renderWidgetSvg(headerWidget, profileData, globalStyles)

<g transform="translate(0, 0)" id="widget-header_01">
  <rect x="0" y="0" width="800" height="90" fill="#1f1f1f" stroke="#252525" stroke-width="1" rx="0" />
  <text x="24" y="44" font-family="'Inter Tight', sans-serif" font-size="28" font-weight="300" fill="#ffffff">The Octocat</text>
  <text x="24" y="72" font-family="'JetBrains Mono', monospace" font-size="14" fill="#c5ff4a">@octocat</text>
  <text x="776" y="44" text-anchor="end" font-family="'Inter Tight', sans-serif" font-size="12" fill="#7a7a7a">[ GitHub ]</text>
</g>