import './HotspotLayer.css';

export interface HotspotConfig {
  id: string;
  left: number;
  top: number;
  width: number;
  height: number;
  ariaLabel: string;
  onClick: () => void;
  shape?: 'rect' | 'circle' | 'pill';
}

interface Props {
  hotspots: HotspotConfig[];
  className?: string;
}

export function HotspotLayer({ hotspots, className }: Props) {
  return (
    <div className={['hotspot-layer', className].filter(Boolean).join(' ')}>
      {hotspots.map((hotspot) => (
        <button
          key={hotspot.id}
          type="button"
          className={`hotspot-layer__button hotspot-layer__button--${hotspot.shape ?? 'rect'}`}
          style={{
            left: `${hotspot.left}%`,
            top: `${hotspot.top}%`,
            width: `${hotspot.width}%`,
            height: `${hotspot.height}%`,
          }}
          aria-label={hotspot.ariaLabel}
          onClick={hotspot.onClick}
        />
      ))}
    </div>
  );
}
