import React, { useEffect, useRef } from 'react';
import { clsx } from 'clsx';

interface ColorBubbleProps {
    colorHex?: string;
    className?: string;
    title?: string;
}

export const ColorBubble: React.FC<ColorBubbleProps> = ({ colorHex, className, title }) => {
    const bubbleRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (bubbleRef.current) {
            if (colorHex) {
                bubbleRef.current.style.setProperty('--bg-color', colorHex);
            } else {
                bubbleRef.current.style.removeProperty('--bg-color');
            }
        }
    }, [colorHex]);

    return (
        <div
            ref={bubbleRef}
            className={clsx(
                "w-4 h-4 rounded-full border shadow-inner transition-all duration-300 flex-shrink-0",
                colorHex
                    ? "border-border/40 dynamic-bg-color"
                    : "border-border/20 bg-transparent opacity-20 border-dashed",
                className
            )}
            title={title || (colorHex ? `Cor: ${colorHex}` : 'Cor não definida')}
        />
    );
};
