"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>
  )
}