Widget

'use client'

import * as React from 'react'
import { Search, Settings, Minus, Maximize2, X } from 'lucide-react'
import { cn } from '@/lib/utils'
import { GroupColorSelector, DEFAULT_GROUPS, type Group } from './group-color-selector'

export interface WidgetProps {
  title: string
  children: React.ReactNode
  instrument?: string
  groups?: Group[]
  groupId?: string
  defaultGroupId?: string
  onGroupChange?: (groupId: string | undefined) => void
  showGroupSelector?: boolean
  showInstrumentSearch?: boolean
  onInstrumentSearch?: () => void
  onTitleChange?: (title: string) => void
  headerActions?: React.ReactNode
  showSettings?: boolean
  showMinimize?: boolean
  showMaximize?: boolean
  showClose?: boolean
  onSettings?: () => void
  onMinimize?: () => void
  onMaximize?: () => void
  onClose?: () => void
  className?: string
  contentClassName?: string
}

// Terminal panel shell, ported from profitmaker.cc. Header chrome: a group-color
// dot + an instrument-search (magnifier) icon on the left, then the title
// (double-click to rename), then settings / minimize / maximize / close on the
// right. Picking a non-transparent group tints the header with a subtle accent.