"use client";
import { cn } from "@/lib/utils";
import Image from "next/image";
import React, { useState } from "react";

interface BlurImageProps extends Omit<React.ComponentProps<typeof Image>, "onLoad"> {
  sizes?: string;
}

export const BlurImage = ({
  src,
  width,
  height,
  alt,
  fill,
  sizes,
  className,
  ...rest
}: BlurImageProps) => {
  const [isLoading, setLoading] = useState(true);

  return (
    <Image
      className={cn(
        "transition duration-300",
        isLoading ? "blur-sm" : "blur-0",
        className
      )}
      onLoad={() => setLoading(false)}
      src={src}
      width={fill ? undefined : width}
      height={fill ? undefined : height}
      fill={fill}
      sizes={sizes}
      loading="lazy"
      decoding="async"
      alt={alt || "Image"}
      {...rest}
    />
  );
};