    import React from 'react';

    interface ColorSettingProps {
    name: string; // The name to display in the <p> tag
    value: string; // The current color value
    setValue: (newColor: string) => void; // The method to update the state
    cssVariable: string; // The CSS variable name to set
    }

    const ColorSetting: React.FC<ColorSettingProps> = ({ name, value, setValue, cssVariable }) => {
    const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const newColor = e.target.value;
        setValue(newColor);
        document.documentElement.style.setProperty(cssVariable, newColor);
    };

    return (
        <div className="settings-option">
        <p>{name}</p>
        <input
            type="color"
            value={value}
            onChange={handleColorChange}
        />
        </div>
    );
    };

    export default ColorSetting;
