import Image, { StaticImageData } from 'next/image';
import { ImageIcon } from 'lucide-react';

interface BlogImageProps {
  src: string | StaticImageData;
  alt: string;
  caption?: string;
  fullWidth?: boolean;
}

export const BlogImage = ({
  src,
  alt,
  caption,
  fullWidth = false,
}: BlogImageProps) => {
  const isStaticImage = typeof src !== 'string';

  return (
    <figure className={`my-8 group ${fullWidth ? '-mx-6' : ''}`}>
      <div className="overflow-hidden rounded-xl border border-gray-200 shadow-lg transition-all duration-300 hover:shadow-xl">
        {isStaticImage ? (
          <Image
            src={src}
            alt={alt}
            placeholder="blur"
            className="w-full h-auto"
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 66vw, 800px"
          />
        ) : (
          <div className="relative aspect-video bg-gray-100">
            <Image
              src={src}
              alt={alt}
              fill
              className="object-cover"
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 66vw, 800px"
            />
          </div>
        )}
      </div>
      {caption && (
        <figcaption className="mt-4 flex items-center justify-center gap-2 text-sm text-gray-500">
          <ImageIcon className="w-4 h-4" />
          <span>{caption}</span>
        </figcaption>
      )}
    </figure>
  );
};