import { useState } from 'react';

export function ImageCard({ src, alt, width = 1640, height = 1800 }) {
  const [isLoaded, setIsLoaded] = useState(false);

  return (
    <div 
      className="relative overflow-hidden rounded-[24px] bg-gray-100/60"
      style={{ aspectRatio: `${width} / ${height}` }}
    >
      <div
        className={`absolute inset-0 bg-gray-200/50 animate-pulse transition-opacity duration-600 ease-out ${
          isLoaded ? 'opacity-0 pointer-events-none' : 'opacity-100'
        }`}
      />

      <img
        src={src}
        alt={alt}
        width={width}
        height={height}
        loading="lazy"
        decoding="async"
        onLoad={() => setIsLoaded(true)}
        className={`w-full h-auto object-cover border-none !shadow-none transition-opacity duration-[600ms] ease-out ${
          isLoaded ? 'opacity-100' : 'opacity-0'
        }`}
      />
    </div>
  );
}