Group Color Selector

'use client'

import * as React from 'react'
import { Plus, X } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface Group {
  id: string
  name: string
  color: string // hex or 'transparent'
  account?: string
  exchange?: string
  market?: string
  tradingPair?: string
}

export const GROUP_COLORS = ['transparent','#00BCD4','#F44336','#9C27B0','#2196F3','#4CAF50','#FF9800','#E91E63'] as const

export interface GroupColorSelectorProps {
  value?: string
  onChange: (groupId: string | undefined) => void
  groups?: Group[]
  onResetGroup?: (groupId: string) => void
  className?: string
}

// A small colored dot that opens a popover of color groups. Configured groups
// (with an account / exchange / market / pair) show their instrument details.