import Timeline from 'wavesurfer.js/dist/plugins/timeline.esm.js';
import Regions from 'wavesurfer.js/dist/plugins/regions.esm.js';

  const timelineRef = useRef<HTMLDivElement>(null);

    if (!waveformRef.current || !spectrogramRef.current) return null;

    if (!waveformRef.current || !spectrogramRef.current || !timelineRef.current) return null;

    // Add timeline plugin
    wavesurfer.registerPlugin(
      Timeline.create({
        container: timelineRef.current,
        height: 20,
        timeInterval: 60,
        primaryLabelInterval: 1,
        secondaryLabelInterval: 1,
        style: {
          fontSize: '12px',
          color: '#666',
        },
      })
    );
    // Add regions plugin
    wavesurfer.registerPlugin(
      Regions.create()
    );

                  {/* Timeline */}
                  <div ref={timelineRef} className="w-full" style={{ height: '20px' }} />

                      {/* Timeline */}
                      <div ref={timelineRef} className="w-full" style={{ height: '20px' }} />