"use client";

import { useState } from "react";
import { ImageOff } from "lucide-react";

/** پیش‌نمایشِ تصویر با جایگزینِ خطا. اگر src بارگذاری نشود، آیکنِ «بدون تصویر». */
export default function Thumb({
  src,
  alt = "",
  size = 44,
  rounded = 8,
}: {
  src: string;
  alt?: string;
  size?: number;
  rounded?: number;
}) {
  const [failed, setFailed] = useState(false);
  if (failed) {
    return (
      <div
        className="grid place-items-center text-[#4a6ea5] bg-[var(--panel-2)]"
        style={{ width: size, height: size, borderRadius: rounded }}
      >
        <ImageOff size={size * 0.45} />
      </div>
    );
  }
  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={src}
      alt={alt}
      onError={() => setFailed(true)}
      style={{
        width: size,
        height: size,
        borderRadius: rounded,
        objectFit: "cover",
        border: "1px solid #1e3a63",
      }}
    />
  );
}