"use client";

interface VideoTextSectionProps {
    videoSrc: string;
    title: string;
    description: string;
    position?: "left" | "right";
}

export default function VideoTextSection({
    videoSrc,
    title,
    description,
    position = "left",
}: VideoTextSectionProps) {
    const isVideoLeft = position === "left";

    return (
        <div
            className={`mb-10 grid items-center gap-12 lg:grid-cols-2 ${!isVideoLeft ? "lg:[&>div:first-child]:order-2" : ""
                }`}
        >
            {/* Video */}
            <div className="w-full overflow-hidden">
                <video
                    autoPlay
                    muted
                    loop
                    playsInline
                    controls
                    className="h-[300px] w-full object-cover sm:h-[320px] lg:h-[360px]"
                >
                    <source
                        src={process.env.NEXT_PUBLIC_API_IMAGE_URL + videoSrc}
                        type="video/mp4"
                    />
                </video>
            </div>

            {/* Content */}
            <div>
                <h3 className="mb-6 text-5xl font-semibold text-[#eca6f5]">
                    {title}
                </h3>

                <p
                    className="whitespace-pre-line text-xl font-semibold text-white"
                    dangerouslySetInnerHTML={{ __html: description || "" }}
                />
            </div>
        </div>
    );
}