uldp.edu.vn/app/components/home/HeroSection.tsx

import { getCmsImageUrl } from '@/utils/image';
import Link from 'next/link';

interface HeroSlide {
    title: string;
    subtitle: string;
    description: string;
    primaryButton: {
        label: string;
        href: string;
    };
    secondaryButton: {
        label: string;
        href: string;
    };
    heroImage?: string;
    videoUrl: string;
}

interface HeroSectionProps {
    data: {
        backgroundImage: string;
        // Optional multi-slide support from CMS
        slides?: HeroSlide[];
        // Legacy single-slide fields (fallback)
        title?: string;
        subtitle?: string;
        description?: string;
        primaryButton?: {
            label: string;
            href: string;
        };
        secondaryButton?: {
            label: string;
            href: string;
        };
        heroImage?: string;
        videoUrl?: string;
    };
}

const HeroSection = ({ data }: HeroSectionProps) => {
    const slides: HeroSlide[] =
        (data.slides && data.slides.length > 0)
            ? data.slides
            : [{
                title: data.title || '',
                subtitle: data.subtitle || '',
                description: data.description || '',
                primaryButton: data.primaryButton || { label: '', href: '#' },
                secondaryButton: data.secondaryButton || { label: '', href: '#' },
                heroImage: data.heroImage,
                videoUrl: data.videoUrl || '',
            }];

    const firstSlide = slides[0];

    return (
        <section className="hero-section hero-1 fix bg-cover" style={{ backgroundImage: `url('${getCmsImageUrl(data.backgroundImage)}')` }}>
            <div className="left-shape">
                <img src="/assets/img/home-1/hero/sape-2.png" alt="img" />
            </div>
            <div className="hero-shape">
                <img src="/assets/img/home-1/hero/shape.png" alt="img" />
            </div>
            <div className="top-shape">
                <img src="/assets/img/home-1/hero/shape-3.png" alt="img" />
            </div>
            <div className="right-shape">
                <img src="/assets/img/home-1/hero/shape-4.png" alt="img" />
            </div>
            <div className="pagi-item">
                <div className="dot-number">
                    <span className="dot-num">
                        <span>03</span>
                    </span>
                    <span className="dot-num">
                        <span>05</span>
                    </span>
                </div>
            </div>
            <div className="container-fluid">
                <div className="row align-items-center">
                    <div className="col-lg-6">
                        <div className="swiper hero-slider">
                            <div className="swiper-wrapper">
                                {slides.map((slide, index) => (
                                    <div className="swiper-slide" key={index}>
                                        <div className="hero-content">
                                            <h6>{slide.subtitle}</h6>
                                            <h1>
                                                {slide.title}
                                                {slide.videoUrl && (
                                                    <a href={slide.videoUrl} className="video-btn video-popup">
                                                        <i className="fa-solid fa-play"></i>
                                                    </a>
                                                )}
                                            </h1>
                                            <p>
                                                {slide.description}
                                            </p>
                                            <div className="hero-button">
                                                {slide.primaryButton?.href && (
                                                    <Link href={slide.primaryButton.href} className="theme-btn">
                                                        {slide.primaryButton.label}
                                                        <i className="fa-solid fa-arrow-right"></i>
                                                    </Link>
                                                )}
                                                {slide.secondaryButton?.href && (
                                                    <Link href={slide.secondaryButton.href} className="theme-btn style-2">
                                                        {slide.secondaryButton.label}
                                                        <i className="fa-solid fa-arrow-right"></i>
                                                    </Link>
                                                )}
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-6">
                        <div className="swiper image-slider">
                            <div className="swiper-wrapper">
                                {slides.map((slide, index) => (
                                    <div className="swiper-slide" key={index}>
                                        <div className="hero-image">
                                            <img src={slide.heroImage || firstSlide.heroImage || "/assets/img/home-1/hero/man.png"} alt="img" />
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default HeroSection;