import React, { useState, useEffect } from 'react';

// AG-Grid Cell Renderer Component
const LCPGridColorRender = (props) => {
    const [color, setColor] = useState(props.value || ''); // Get the color value from the cell data

    useEffect(() => {
        // Update color if the value from AG-Grid changes
        if (props.value !== color) {
            setColor(props.value);
        }
    }, [props.value]); // Dependency on props.value so it updates when the cell value changes

    return (
        <div 
            style={{
                width: '30px', 
                height: '30px', 
                backgroundColor: color, 
                border: '1px solid #000',
                margin: '0 auto'
            }}
        />
    );
};

export default LCPGridColorRender;