"use client";
import { useEffect, useState } from 'react';
import { FastAverageColor } from 'fast-average-color';

const useAvgColor = (image) => {
    const [color, setColor] = useState("");
    const [isDark, setIsDark] = useState(false);

    useEffect(() => {
        const fac = new FastAverageColor();
        console.log("image",image)

        if (image) {
            fac.getColorAsync(image)
                .then((colorResult) => {
                    setColor(colorResult.hex ?? "#e18c8c");
                    setIsDark(colorResult.isDark)
                })
                .catch((e) => {
                    console.log(e);
                });
        }else{
            setColor("#e18c8c")
        }

        return () => fac.destroy(); // Clean up on component unmount
    }, [image]);

    return {color,isDark};
};

export default useAvgColor;
