"use client";

interface VideoFeatureSectionProps {
    id?: string;
    title: React.ReactNode;
    featureTitle: string;
    description: string;
    videoSrc: string;
}

export default function VideoFeatureSection({
    id,
    title,
    featureTitle,
    description,
    videoSrc,
}: VideoFeatureSectionProps) {
    return (
        <section id={id} className="w-full py-12 bg-black">
            <div className="mx-auto px-5 sm:px-5 lg:px-30 md:px-8 2xl:px-45">
                <div className="mx-auto mb-10 max-w-3xl text-center">
                    <h3 className="text-5xl font-medium text-[#bb13d1] md:text-6xl">
                        {title}
                    </h3>
                </div>

                <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
                    <div className="flex items-start">
                        <h3 className="text-4xl font-light text-[#bb13d1]">
                            {featureTitle}
                        </h3>
                    </div>

                    <div>
                        <p className="text-lg font-semibold leading-relaxed text-white">
                            {description}
                        </p>
                    </div>
                </div>

                <div className="mt-12 overflow-hidden rounded-lg w-full aspect-video">
                    <video
                        className="h-full w-full object-cover rounded-lg"
                        src={videoSrc}
                        autoPlay
                        loop
                        muted
                        playsInline
                        controls={false}
                    />
                </div>
            </div>
        </section>
    );
}