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

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

export default function LinkWidget({ widget, onContextMenu, onNavigate }: Props) {
  const target = widget.options['target'] ?? '';
  const label = widget.options['label'] ?? target ?? 'Open';
  const icon = widget.options['icon'] ?? '↗';

  function handleClick(e: MouseEvent) {
    e.preventDefault();
    if (target && onNavigate) onNavigate(target);
  }

  return (
    <div
      class="link-widget"
      style={`left:${widget.x}px;top:${widget.y}px;width:${widget.w}px;height:${widget.h}px;`}
      onContextMenu={onContextMenu}
    >
      <button class="link-btn" onClick={handleClick} title={`Navigate to: ${target}`}>
        <span class="link-icon">{icon}</span>
        <span class="link-label">{label}</span>
      </button>
    </div>
  );
}