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

interface HeroSectionProps {
    data: {
        title: string;
        subtitle: string;
        description: string;
        primaryButton: {
            label: string;
            href: string;
        };
        secondaryButton: {
            label: string;
            href: string;
        };
        backgroundImage: string;
        videoUrl: string;
    };
}

const HeroSection = ({ data }: HeroSectionProps) => {
    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">
                                <div className="swiper-slide">
                                    <div className="hero-content">
                                        <h6>{data.subtitle}</h6>
                                        <h1>
                                            {data.title}
                                            <a href={data.videoUrl} className="video-btn video-popup">
                                                <i className="fa-solid fa-play"></i>
                                            </a>
                                        </h1>
                                        <p>
                                            {data.description}
                                        </p>
                                        <div className="hero-button">
                                            <Link href={data.primaryButton.href} className="theme-btn">
                                                {data.primaryButton.label}
                                                <i className="fa-solid fa-arrow-right"></i>
                                            </Link>
                                            <Link href={data.secondaryButton.href} className="theme-btn style-2">
                                                {data.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">
                                <div className="swiper-slide">
                                    <div className="hero-image">
                                        <img src="/assets/img/home-1/hero/man.png" alt="img" />
                                    </div>
                                </div>
                                <div className="swiper-slide">
                                    <div className="hero-image">
                                        <img src="/assets/img/home-1/hero/man.png" alt="img" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default HeroSection;