// 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;