import AudioPlayer from "@/components/Low/AudioPlayer";
import { v4 } from "uuid";


const INSTRUCTIONS_AUDIO_SRC =
	"https://firebasestorage.googleapis.com/v0/b/storied-phalanx-349916.appspot.com/o/generic_listening_intro_v2.mp3?alt=media&token=16769f5f-1e9b-4a72-86a9-45a6f0fa9f82";

const RenderAudioInstructionsPlayer: React.FC = () => (
    <div className="flex flex-col gap-8 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16">
        <div className="flex flex-col w-full gap-2">
            <h4 className="text-xl font-semibold">Please listen to the instructions audio attentively.</h4>
        </div>
        <div className="rounded-xl flex flex-col gap-4 items-center w-full h-fit">
            <AudioPlayer key={v4()} src={INSTRUCTIONS_AUDIO_SRC} color="listening" />
        </div>
    </div>
);

export default RenderAudioInstructionsPlayer;
