import { useEffect, useRef } from 'react';

const AccordionTitleIsland = () => {
  const markerRef = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    const marker = markerRef.current;
    if (!marker) return;

    const details = marker.closest('details');
    const summary = details?.querySelector('summary');
    if (!summary) return;

    const handleClick = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      const isIconClick = target.closest('svg');
      if (!isIconClick) {
        e.preventDefault();
      }
    };

    summary.addEventListener('click', handleClick);
    return () => summary.removeEventListener('click', handleClick);
  }, []);

  return <span ref={markerRef} style={{ display: 'none' }} />;
};

export default AccordionTitleIsland;
