Portfolio

'use client'

import * as React from 'react'
import { ChevronDown, ChevronRight, Settings } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface PortfolioAsset {
  symbol: string
  name: string
  quantity: string
  price: string
  avg: string
  value: string
  share: string
  profit: string
  profitPercent: string
  color?: string
}

export interface PortfolioCategory {
  id: string
  name: string
  total: string
  share: string
  items: PortfolioAsset[]
}

export interface PortfolioProps {
  categories: PortfolioCategory[]
  title?: string
  subtitle?: string
  todayChange?: { value: string; percent: string }
  allTimeChange?: { value: string; percent: string }
  className?: string
}

// Balance header with Today / All Time stat cards and an 8-column table of
// expandable categories (click to toggle) with colored asset-row avatars.