export interface TechStackConfig {
  selectedTechs?: string[]   // Array of technology IDs (e.g. ['ts', 'react', 'nextjs'])
  theme?: 'dark' | 'light'   // Default: 'dark'
  perLine?: number           // Default: 12 (maximum icons per row)
  showTitle?: boolean        // Default: true
  customTitle?: string       // Default: '[ TECHNOLOGIES & SKILLS ]'
}

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

const techStackWidget: WidgetInstance = {
  instanceId: 'tech_stack_01',
  widgetId: 'tech-stack',
  name: 'Tech Stack',
  position: { x: 0, y: 248 },
  size: { width: 800, height: 140 },
  config: {
    selectedTechs: ['ts', 'react', 'nextjs', 'nodejs', 'tailwind', 'postgres', 'docker', 'git'],
    perLine: 8,
    showTitle: true,
    customTitle: '[ CORE TECH STACK ]',
  },
  locked: false,
  visible: true,
  zIndex: 3,
}

const svgOutput = renderWidgetSvg(techStackWidget, profileData, globalStyles)