import React from 'react';
import { Link as LinkScroll } from 'react-scroll'
import Link from 'next/link';
import dynamic from 'next/dynamic';




const MainBanner = ({main_banner,news}) => {
    const Main_Banner = (main_banner && main_banner.length > 0)?(
        <div className="bigdata-analytics-banner" style={{
            'backgroundImage' : (main_banner[0].attributes.Contents.data)?`url('/api/util?img=${encodeURIComponent(main_banner[0].attributes.Contents.data[0].attributes.Image.data.attributes.url)}')`:url('/images/bigdata-analytics/main-banner.jpg'),
            }}>
            <div className="bigdata-analytics-content" >
                <h1>{main_banner[0].attributes.Contents.data[0].attributes.Title}</h1>
                <p>{main_banner[0].attributes.Contents.data[0].attributes.Description}</p>

                <LinkScroll offset={-100} to="business_partner" spy={true} smooth={true}>
                    <a className="btn btn-primary">Get Started</a>
                </LinkScroll>
            </div>
        </div>
    ):(
        <div className="bigdata-analytics-banner">
            <div className="bigdata-analytics-content" >
                <h1>Selamat Datang di Thamrin Group</h1>
                <p>Thamrin Group adalah perusahaan terkemuka di Sumatera Selatan & Bengkulu dengan fokus bisnis pada sektor otomotif dan properti.</p>

                <LinkScroll offset={-100} to="business_partner" spy={true} smooth={true}>
                    <a className="btn btn-primary">Get Started</a>
                </LinkScroll>
            </div>
        </div>
    );
    const News = (news && news.length >0)?news[0].attributes.Contents.data.map((data)=>{
        return (
            <Link href={`/news/${data.id}`}>
                <div className="bigdata-analytics-banner" style={{
                'backgroundImage' : (data.attributes.Image.data)?`url('/api/util?img=${encodeURIComponent(data.attributes.Image.data.attributes.url)}')`:url('/images/bigdata-analytics/main-banner.jpg'),
                }}>
                    <div className="bigdata-analytics-content newsTitle" >
                        <h1>{data.attributes.Title}</h1>
                    </div>
                </div>
            </Link>
        );
    }):"";
    const OwlCarousel = dynamic(import('react-owl-carousel3'));
    const options = {
        center:false,
        loop: false,
        nav: false,
        dots: true,
        autoplay: true,
        smartSpeed: 1000,
        margin: 0,
        autoplayTimeout: 5000,
        autoWidth:false,
        responsive: {
            0:{
                items: 1,
            },
        },
    }
    return (
        <div id="home">
            <OwlCarousel className="ml-projects-slides owl-carousel fullw owl-theme"
                {...options}>
                {Main_Banner}
                {News}
            </OwlCarousel>
        </div>
    )
}

export default MainBanner;