"use client"

import Image from "next/image"

import styles from "./hero.module.css"

import type { HeroProps } from "@/types/components/current/hero"

export default function Hero({ images }: HeroProps) {
  return (
    <div className="hero-content-overlay hero-content-widget">
      <div className="hero-content-overlay__img-container">
        <div className="hero-fixed hero-fixed--deemphasized" style={{ marginTop: "0px" }}>
          <div className="hero" style={{ top: "113px" }}>
            <div className="hero__img-container">
              <div id="full-width-slider" className="royalSlider royalSlider--hero rsDefault rsHor rsFade rsWithBullets" data-js="hero-slider" tabIndex={0} aria-label="Carousel. Change slides with keyboard left and right arrows." style={{ touchAction: "pan-y" }}>
                <div className="rsOverflow" style={{ width: "1555px", height: "650px" }}>
                  <div className="rsContainer">
                    <div style={{ zIndex: 0 }} className="rsSlide ">
                      <picture style={{ visibility: "visible", opacity: 1, transition: "opacity 400ms ease-in-out 0s" }}>
                        {images.map(({ node: image }) => (
                          <Image
                            alt={image.title}
                            className={`rsImg-x slider-plchldr ${styles.heroImage}`}
                            data-aspectratio="1.50"
                            height={image.dimension.height}
                            key={image.title}
                            src={image.url}
                            unoptimized
                            width={image.dimension.width}
                          />
                        ))}
                      </picture>
                    </div>
                  </div>
                  <div className="rsArrow rsArrowLeft" style={{ display: "none" }}>
                    <div className="rsArrowIcn" tabIndex={0} />
                  </div>
                  <div className="rsArrow rsArrowRight" style={{ display: "none" }}>
                    <div className="rsArrowIcn" tabIndex={0} />
                  </div>
                </div>
                <div className="rsNav rsBullets">
                  <div className="rsNavItem rsBullet rsNavSelected">
                    <span></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}