import React from "react"
import Search from "../../molecules/Search/Search"
import { NavLink } from "react-bootstrap"
import { Icon } from "@foundations/Icons/Icons"
import SlickCarousel from "@organisms/SlickCarousel/SlickCarousel"

interface HeaderBannerProps {
    helpLink?: string
    title?: string
    subtitle?: string
    onSearch?: (value: string) => void
    advancedSearchEnabled?: boolean
}

const HeaderBanner = ({ title, subtitle, helpLink, onSearch, advancedSearchEnabled = true }: HeaderBannerProps) => {
    const carouselArgs = {
        slidesToShow: 6,
        slidesToScroll: 6,
        autoplay: false,
        dots: false,
        arrows: true,
        infinite: true,
        responsive: [
            {
                breakpoint: 1200,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 5,
                },
            },
            {
                breakpoint: 992,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 4,
                },
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                },
            },
            {
                breakpoint: 576,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                },
            },
        ],
    }

    return (
        <div className={"header-banner-container"}>
            {title && (
                <div className={"header-banner"}>
                    <div className={"header-banner-title"}>{title}</div>
                    {subtitle && <div>{subtitle}</div>}
                </div>
            )}
            <div className="search-box">
                <Search onSearch={onSearch} className="search-monochromatic" />
                <div className="d-flex flex-row justify-content-between w-100 mt-3 px-md-2">
                    <div>
                        {advancedSearchEnabled && (
                            <NavLink href={"#"} className="me-2">
                                <Icon name="caret-right-fill" /> Advanced Search
                            </NavLink>
                        )}
                    </div>
                    <div>
                        <NavLink href={helpLink ?? "#"}>
                            <Icon name="question-circle-fill" /> Help
                        </NavLink>
                    </div>
                </div>
            </div>

            <SlickCarousel {...carouselArgs} className="topics-carousel-wrapper mt-5">
                <div className="topic-item">
                    <div className="topic-icon">
                        <img
                            src="https://design-drupal.pacificdata.org/sites/default/files/2025-04/icon_agriculture.svg"
                            alt="Agriculture and Forestry"
                        />
                    </div>
                    <a href="/topic/agriculture-forestry" className="topic-name stretched-link">
                        Agriculture and Forestry
                    </a>
                </div>
                <div className="topic-item">
                    <div className="topic-icon">
                        <img
                            src="https://design-drupal.pacificdata.org/sites/default/files/2025-04/icon_climatechange.svg"
                            alt="Climate Change, Disasters and Risks"
                        />
                    </div>
                    <a href="/topic/climate-change-disasters-risks" className="topic-name stretched-link">
                        Climate Change, Disasters and Risks
                    </a>
                </div>
                <div className="topic-item">
                    <div className="topic-icon">
                        <img
                            src="https://design-drupal.pacificdata.org/sites/default/files/2025-04/icon_economy.svg"
                            alt="Economy"
                        />
                    </div>
                    <a href="/topic/economy" className="topic-name stretched-link">
                        Economy
                    </a>
                </div>
                <div className="topic-item">
                    <div className="topic-icon">
                        <img
                            src="https://design-drupal.pacificdata.org/sites/default/files/2025-04/icon_education.svg"
                            alt="Education"
                        />
                    </div>
                    <a href="/topic/education" className="topic-name stretched-link">
                        Education
                    </a>
                </div>
                <div className="topic-item">
                    <div className="topic-icon">
                        <img
                            src="https://design-drupal.pacificdata.org/sites/default/files/2025-04/icon_energy.svg"
                            alt="Energy"
                        />
                    </div>
                    <a href="/topic/energy" className="topic-name stretched-link">
                        Energy
                    </a>
                </div>
                <div className="topic-item">
                    <div className="topic-icon">
                        <img
                            src="https://design-drupal.pacificdata.org/sites/default/files/2025-04/icon_environment.svg"
                            alt="Environment"
                        />
                    </div>
                    <a href="/topic/environment" className="topic-name stretched-link">
                        Environment
                    </a>
                </div>
                <div className="topic-item">
                    <div className="topic-icon">
                        <img
                            src="https://design-drupal.pacificdata.org/sites/default/files/2025-04/icon_fisheries.svg"
                            alt="Fisheries and Aquaculture"
                        />
                    </div>
                    <a href="/topic/fisheries-aquaculture" className="topic-name stretched-link">
                        Fisheries and Aquaculture
                    </a>
                </div>
                <div className="topic-item">
                    <div className="topic-icon">
                        <img
                            src="https://design-drupal.pacificdata.org/sites/default/files/2025-04/icon_gender.svg"
                            alt="Gender"
                        />
                    </div>
                    <a href="/topic/gender" className="topic-name stretched-link">
                        Gender
                    </a>
                </div>
                <div className="topic-item">
                    <div className="topic-icon">
                        <img
                            src="https://design-drupal.pacificdata.org/sites/default/files/2025-04/icon_health.svg"
                            alt="Health"
                        />
                    </div>
                    <a href="/topic/health" className="topic-name stretched-link">
                        Health
                    </a>
                </div>
                <div className="topic-item">
                    <div className="topic-icon">
                        <img
                            src="https://design-drupal.pacificdata.org/sites/default/files/2025-04/icon_ict.svg"
                            alt="Information, Communication and Technology"
                        />
                    </div>
                    <a href="/topic/information-communication-technology" className="topic-name stretched-link">
                        Information, Communication and Technology
                    </a>
                </div>
                <div className="topic-item">
                    <div className="topic-icon">
                        <img
                            src="https://design-drupal.pacificdata.org/sites/default/files/2025-04/icon_ocean.svg"
                            alt="Ocean and Maritime"
                        />
                    </div>
                    <a href="/topic/ocean-maritime" className="topic-name stretched-link">
                        Ocean and Maritime
                    </a>
                </div>
                <div className="topic-item">
                    <div className="topic-icon">
                        <img
                            src="https://design-drupal.pacificdata.org/sites/default/files/2025-04/icon_population.svg"
                            alt="Population"
                        />
                    </div>
                    <a href="/topic/population" className="topic-name stretched-link">
                        Population
                    </a>
                </div>
                <div className="topic-item">
                    <div className="topic-icon">
                        <img
                            src="https://design-drupal.pacificdata.org/sites/default/files/2025-04/icon_social.svg"
                            alt="Social and Culture"
                        />
                    </div>
                    <a href="/topic/social-culture" className="topic-name stretched-link">
                        Social and Culture
                    </a>
                </div>
            </SlickCarousel>
        </div>
    )
}

export default HeaderBanner
export { HeaderBanner, HeaderBannerProps }