/**
 * SpotElement Component
 *
 * Hotspot element with icon or default indicator.
 * Renders with unified wrapper styling + content.
 */

import React from 'react';
import type { CSSProperties } from 'react';
import type { CanvasElement } from '../../../types/constructor';
import { resolveAssetPlaybackUrl } from '../../../lib/assetUrl';

interface SpotElementProps {
  element: CanvasElement;
  resolveUrl?: (url: string | undefined) => string;
  className: string;
  style: CSSProperties;
}

const SpotElement: React.FC<SpotElementProps> = ({
  element,
  resolveUrl,
  className,
  style,
}) => {
  const resolve = resolveUrl ?? resolveAssetPlaybackUrl;

  // With icon: render image
  if (element.iconUrl) {
    const imgStyle: CSSProperties = {
      width: element.width ? '100%' : 'auto',
      height: element.height ? '100%' : 'auto',
      objectFit: 'contain',
    };

    return (
      <div className={className} style={style}>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={resolve(element.iconUrl)}
          alt='Hotspot'
          style={imgStyle}
          draggable={false}
        />
      </div>
    );
  }

  // Without icon: render default spot indicator
  return (
    <div className={className} style={style}>
      <div className='w-8 h-8 rounded-full bg-blue-500/70 border-2 border-white animate-pulse' />
    </div>
  );
};

export default SpotElement;
