"use client";

import React, { useState } from "react";
import Image, { type ImageProps } from "next/image";
import { Mountain } from "lucide-react";
import styles from "./ImageWithFallback.module.css";

interface ImageWithFallbackProps extends Omit<ImageProps, "onError"> {
  fallbackText?: string;
  showText?: boolean;
}

export default function ImageWithFallback({
  src,
  alt,
  fallbackText = "Foto belum tersedia",
  showText = true,
  className = "",
  ...rest
}: ImageWithFallbackProps) {
  const [hasError, setHasError] = useState(false);

  if (hasError || !src) {
    return (
      <div
        className={`${styles.fallbackContainer} ${className}`}
        role="img"
        aria-label={alt || fallbackText}
      >
        <svg
          className={styles.subtlePattern}
          viewBox="0 0 200 120"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <path
            d="M0 120 L40 70 L90 100 L140 40 L200 120 Z"
            fill="#3DAD3C"
          />
        </svg>
        <Mountain size={28} className={styles.fallbackIcon} aria-hidden />
        {showText && <span className={styles.fallbackText}>{fallbackText}</span>}
      </div>
    );
  }

  return (
    <Image
      src={src}
      alt={alt}
      className={className}
      onError={() => setHasError(true)}
      {...rest}
    />
  );
}