"use client"

import { useState } from "react"
import Image from "next/image"

interface MovingServiceImageProps {
  src: string
  alt: string
}

export function MovingServiceImage({ src, alt }: MovingServiceImageProps) {
  const [imageError, setImageError] = useState(false)

  if (imageError) {
    return (
      <div className="relative w-full bg-muted flex items-center justify-center" style={{ aspectRatio: 'auto', minHeight: '300px' }}>
        <div className="text-center p-4">
          <p className="text-sm text-muted-foreground mb-2">Image coming soon</p>
          <p className="text-xs text-muted-foreground/70">{alt}</p>
        </div>
      </div>
    )
  }

  return (
    <div className="relative w-full bg-muted flex items-center justify-center py-6" style={{ minHeight: '300px' }}>
      <div className="relative w-full h-full flex items-center justify-center">
        <Image
          src={src}
          alt={alt}
          width={800}
          height={1200}
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          className="w-auto h-auto max-w-full max-h-[600px] object-contain"
          style={{ 
            display: 'block'
          }}
          onError={() => setImageError(true)}
        />
      </div>
    </div>
  )
}

