import { jsxs, jsx } from 'react/jsx-runtime';
import { cn } from '../../../utils/cn.js';
import { heatmapTheme } from './Heatmap.theme.js';

const HeatmapLegend = ({ colorKey = 'value', color = 'var(--color-primary)', // Correct CSS variable
minValue = 0, maxValue = 100, labels = {
    min: 'Low activity',
    max: 'High activity'
}, className }) => {
    // Create gradient using passed color (supports CSS variables and hex)
    const gradientStyle = {
        background: `linear-gradient(to right, color-mix(in srgb, ${color} 20%, transparent), ${color})`
    };
    return (jsxs("div", { className: cn(heatmapTheme.legendStyle, className), children: [jsx("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }), jsxs("div", { className: "flex items-center justify-between text-sm font-medium text-[var(--color-text-secondary)]", children: [jsx("div", { children: labels.min }), jsx("div", { children: labels.max })] })] }));
};

export { HeatmapLegend };
