"use client"

import React from 'react'

export default function ChartLegend({ items }: { items: Array<{ label: string; color: string }> }) {
  if (!items?.length) return null
  return (
    <div className="flex flex-wrap gap-x-3 gap-y-1 text-xs mb-2" style={{ color: 'var(--text-secondary)'}}>
      {items.map((it) => (
        <div key={it.label} className="flex items-center gap-1.5">
          <span className="inline-block w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: it.color }} />
          <span>{it.label}</span>
        </div>
      ))}
    </div>
  )
}