"use client";
import CustomButton from "./CustomButton";
import { useRef, useEffect, useState } from 'react';
import Image from 'next/image';
import { CoursesProps, SettingsProps } from "@/types";


function convertToEmbedLink(watchLink: string): string {
    const videoIdMatch = watchLink.match(/(?:v=|\/)([a-zA-Z0-9_-]{11})/);
    if (videoIdMatch && videoIdMatch[1]) {
        const videoId = videoIdMatch[1];
        return `https://www.youtube.com/embed/${videoId}`;
    }
    return watchLink; // Return original link if conversion fails
}

const Hero2 = ({ settings }: { settings: SettingsProps }) => {
    return (
        <div className="relative flex flex-col items-center bg-[#F6E8E9] h-auto z-[10] w-full pt-30 transition-all duration-200">
            <div className="flex w-full h-auto justify-center items-center relative">
                <div className="bg-[url('/images/014.png')] absolute bottom-0 inset-0 h-auto w-full bg-contain bg-bottom bg-no-repeat"></div>
                <iframe
                    className="rounded-2xl w-[100vh] aspect-video justify-center relative z-10 lg:m-[15vh] max-sm:m-[5vh] md:m-[10vh]"
                    src={convertToEmbedLink(settings.youtube_link)}
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                ></iframe>
            </div>
        </div>
    )
}

export default Hero2