'use client';

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

interface HeroImageProps {
  src: string;
  alt: string;
  priority?: boolean;
}

export function HeroImage({ src, alt, priority = true }: HeroImageProps) {
  const [imageError, setImageError] = useState(false);
  const [imageSrc, setImageSrc] = useState(src);

  // Fallback placeholder image
  const fallbackImage = '/placeholder-hero.jpg';

  const handleError = () => {
    console.warn(`[HeroImage] Failed to load image: ${imageSrc}`);
    if (!imageError) {
      setImageError(true);
      // Try fallback image
      setImageSrc(fallbackImage);
    }
  };

  return (
    <div className="relative w-full aspect-video rounded-xl overflow-hidden mb-8 bg-gradient-to-br from-[#1A1A1F] to-[#202026]">
      {imageError && imageSrc === fallbackImage ? (
        // Show placeholder div if even fallback fails
        <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-[#1A1A1F] to-[#202026]">
          <div className="text-center text-[#B8B8C0]">
            <svg
              className="w-16 h-16 mx-auto mb-2 opacity-50"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
              />
            </svg>
            <p className="text-sm">画像を読み込めませんでした</p>
          </div>
        </div>
      ) : (
        <Image
          src={imageSrc}
          alt={alt}
          fill
          priority={priority}
          className="object-cover"
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
          onError={handleError}
          unoptimized={imageError} // Skip optimization for fallback
        />
      )}
    </div>
  );
}
