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




const MainBanner = ({company,main_banner,link_to,banner,className}) => {
    var defaultValue;
    if(company == 'thamrin'){
        defaultValue = {
            Title:"Selamat Datang di Thamrin Group",
            Description:"Thamrin Group adalah perusahaan terkemuka di Sumatera Selatan & Bengkulu dengan fokus bisnis pada sektor otomotif dan properti.",
            Image:'/images/bigdata-analytics/main-banner.jpg'
        }
    }
    else if(company == 'yamaha'){
        defaultValue = {
            Title:"Exclusif Motor Untuk Anda",
            Description:"PT.Thamrin Brother's Yamaha merupakan sebuah bisnis company dari Thamrin Group yang bergerak dalam bidang penjualan produk Motor dan Sparepart Yamaha.",
            Image:'/images/Yamaha/banner.jpg'
        }
    }
    else{
        defaultValue = {
            Title:"Exclusif Motor Untuk Anda",
            Description:"",
            Image:'/images/Yamaha/banner.jpg'
        }
    }
    const Main_Banner = (main_banner && main_banner.length > 0 && main_banner[0].attributes.Contents.data&&main_banner[0].attributes.Contents.data.length>0)?(
        <div className="bigdata-analytics-banner" style={{
            'backgroundImage' : `url('/api/util?img=${encodeURIComponent(main_banner[0].attributes.Contents.data[0].attributes.Image.data.attributes.url)}')`,
            }}>
            <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>
                {(main_banner[0].attributes.Contents.data[0].attributes.Link)
                ?(<Link href={`./${main_banner[0].attributes.Contents.data[0].attributes.Link}`}>
                    <a className="btn btn-primary">Get Started</a>
                </Link>)
                :(<LinkScroll offset={-100} to={link_to} spy={true} smooth={true}>
                    <a className="btn btn-primary">Get Started</a>
                </LinkScroll>)
                }
            </div>
        </div>
    ):(
        <div className="bigdata-analytics-banner" style={{
            'backgroundImage' : `url('${defaultValue.Image}')`,
            
            }}>
            <div className="bigdata-analytics-content" >
                <h1>{defaultValue.Title}</h1>
                <p>{defaultValue.Description}</p>
                <LinkScroll offset={-100} to="business_partner" spy={true} smooth={true}>
                    <a className="btn btn-primary">Get Started</a>
                </LinkScroll>
            </div>
        </div>
    );
    const Banners = (banner && banner.length >0)?banner.map((data,idx)=>{
        return (
            // <Link href={`/news/${data.id}`}>
                <div key={idx} className="bigdata-analytics-banner" style={{
                'backgroundImage' : `url('/api/util?img=${encodeURIComponent(data.attributes.url)}')`,
                }}>
                    {/* <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" className={className}>
            <OwlCarousel className="ml-projects-slides owl-carousel fullw owl-theme"
                {...options}>
                {Main_Banner}
                {Banners}
            </OwlCarousel>
        </div>
    )
}

export default MainBanner;