// components/WavesurferPlayer.tsx
import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
import WaveSurfer from "wavesurfer.js";

type Props = {
  url: string;
  height?: number;
  waveColor?: string;
};

export type WavesurferPlayerHandle = {
  play: () => void;
  pause: () => void;
  isPlaying: () => boolean;
};

const WavesurferPlayer = forwardRef<WavesurferPlayerHandle, Props>(({ url, height = 100, waveColor = "red" }, ref) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const waveSurferRef = useRef<WaveSurfer | null>(null);

  useEffect(() => {
    if (containerRef.current) {
      waveSurferRef.current = WaveSurfer.create({
        container: containerRef.current,
        waveColor,
        height,
      });
      waveSurferRef.current.load(url);
    }

    return () => {
      waveSurferRef.current?.destroy();
    };
  }, [url, waveColor, height]);

  useImperativeHandle(ref, () => ({
    play: () => { waveSurferRef.current?.play(); },
    pause: () => { waveSurferRef.current?.pause(); },
    isPlaying: () => !!waveSurferRef.current?.isPlaying(),
  }));

  return <div ref={containerRef} className="w-full rounded-md overflow-hidden" />;
});

export default WavesurferPlayer;