import { h } from 'preact';
import type { Widget } from '../lib/types';

interface Props { widget: Widget; onContextMenu?: (e: MouseEvent) => void; }

export default function ImageWidget({ widget, onContextMenu }: Props) {
  const url = widget.options['url'] ?? '';
  const fit = widget.options['fit'] ?? 'contain'; // contain | cover | fill
  const alt = widget.options['alt'] ?? '';
  const border = widget.options['border'] !== 'false';

  return (
    <div
      class="image-widget"
      style={`left:${widget.x}px;top:${widget.y}px;width:${widget.w}px;height:${widget.h}px;${border ? '' : 'border:none;'}`}
      onContextMenu={onContextMenu}
    >
      {url
        ? <img src={url} alt={alt} style={`object-fit:${fit};width:100%;height:100%;display:block;`} />
        : <span class="image-placeholder">No URL</span>
      }
    </div>
  );
}