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


// Old instructions they were porbably taken from 
// an heygen video since I couldn't find the Polly Voice 
const OLD_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";

// New full exam module audio with Polly Matthew voice 
const NEW_INSTRUCTIONS_AUDIO_SRC =
    "https://firebasestorage.googleapis.com/v0/b/storied-phalanx-349916.appspot.com/o/listening_instructions%2FpresetInstructions_1_2_3_4.mp3?alt=media&token=7a7ac516-221d-4e79-bd28-5d6bee9d79d8";


const RenderAudioInstructionsPlayer: React.FC<{instructions?: string}> = ({instructions}) => (
    <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 ?? NEW_INSTRUCTIONS_AUDIO_SRC} color="listening" />
        </div>
    </div>
);

export default RenderAudioInstructionsPlayer;
