import Image from 'next/image';
import { useId } from 'react';

export default function FeatureImage({
  src,
  width,
  height,
  alt,
}: {
  src: string;
  width: number | `${number}`;
  height: number | `${number}`;
  alt: string;
}) {
  const id = useId();
  const delay = (id.charCodeAt(1) % 5) + 0.5;

  return (
    <div className="relative rounded-[18px] p-px shadow-2xl">
      <div
        className="fade-in-out absolute top-0 right-0 bottom-0 left-0 z-0 rounded-[17px] bg-linear-to-tr from-[#4d094e] to-pink-500/70 p-[2px]"
        style={{
          WebkitMask: 'linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0))',
          animationDelay: `${delay}s`,
        }}
      ></div>

      <Image className="relative z-10 block rounded-2xl" src={src} alt={alt} width={width} height={height} />
    </div>
  );
}