import type { Palette } from "@vibrant/color";
import { Vibrant } from "node-vibrant/browser";

export const useVibrantPalette = (imageRef: Ref) => {
    if (import.meta.server) {
        return ref<Palette | null>(null);
    }

    return computedAsync(async () => {
        if (!imageRef.value?.$el) return null;
        const vibrant = Vibrant.from(imageRef.value.$el);
        const palette = await vibrant.getPalette();
        return palette || null;
    }, null);
};