'use client';
import * as React from 'react';
import { Photo, ProductPhoto } from './Photo';

type Props = {
  photos?: string[];
  cat: string;
  icon?: string;
  h?: number | string;
  idx?: number;
  radius?: number;
  style?: React.CSSProperties;
  children?: React.ReactNode;
  /** Use the business gradient palette for the placeholder instead of the classifieds one. */
  biz?: boolean;
};

/** Shows a real uploaded photo when available, otherwise the category gradient placeholder. */
export function AdImage({ photos, cat, icon, h = 150, idx = 0, radius = 14, style, children, biz }: Props) {
  const src = photos && photos.length ? photos[idx % photos.length] : null;
  if (!src) {
    return biz ? (
      <Photo cat={cat} h={h} idx={idx} radius={radius} style={style}>{children}</Photo>
    ) : (
      <ProductPhoto cat={cat} icon={icon} h={h} idx={idx} radius={radius} style={style}>{children}</ProductPhoto>
    );
  }
  return (
    <div className="ph" style={{ height: h, borderRadius: radius, padding: 0, ...style }}>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={src}
        alt=""
        style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: radius, display: 'block' }}
      />
      {children}
    </div>
  );
}