// components/FeatureSection.tsx

interface FeatureSectionProps {
    title: string;
    description: string;
    video: string;
    imagePosition?: boolean;
}

export default function FeatureSection({
    title,
    description,
    video,
    imagePosition = false,
}: FeatureSectionProps) {

    return (
        <section className="py-16 mx-auto px-5 sm:px-5 lg:px-30 md:px-8 2xl:px-45">
            <div
                className={`grid items-center gap-12 lg:grid-cols-2 ${!imagePosition ? "lg:[&>*:first-child]:order-2" : ""
                    }`}
            >
                <div className="overflow-hidden ">
                    <video
                        autoPlay
                        muted
                        loop
                        playsInline
                        className="aspect-video w-full object-cover"
                    >
                        <source src={process.env.NEXT_PUBLIC_API_IMAGE_URL + video} type="video/mp4" />
                    </video>
                </div>
                <div>
                    <h3 className="mb-6 text-3xl font-semibold text-[#eca6f5]">
                        {title}
                    </h3>

                    <p
                        className="text-lg text-white font-semibold"
                        dangerouslySetInnerHTML={{ __html: description || "" }}
                    />
                </div>
            </div>
        </section>
    );
}