"use client"

import Image, { ImageProps } from "next/image"
import { useState } from "react"
import clsx from "clsx"

interface BlurImageProps extends ImageProps {
  avgColor?: string // e.g. "#aabbcc"
  fillParent?: boolean // for background/hero usage
}

export default function BlurImage({ src, alt, avgColor = "#e5e7eb", className, fillParent = false, ...props }: BlurImageProps) {
  const [isLoaded, setIsLoaded] = useState(false)

  return (
    <div
      className={clsx("overflow-hidden", fillParent ? "absolute inset-0" : "relative rounded-xl")}
      style={{ background: `linear-gradient(180deg, ${avgColor} 0%, #00000022 100%)` }}
    >
      <Image
        {...props}
        src={src}
        alt={alt}
        fill={fillParent}
        onLoad={() => setIsLoaded(true)}
        className={clsx(
          "object-cover transition-all duration-700 ease-in-out",
          isLoaded ? "opacity-100 scale-100 blur-0" : "opacity-0 scale-105 blur-xl",
          className
        )}
      />
    </div>
  )
}