/* eslint-disable formatjs/no-literal-string-in-jsx */

import Image from "@scandic-hotels/design-system/Image"

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

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

export default function Hero({ images }: HeroProps) {
  return (
    <div className={styles.wrapper} aria-label="Hero" tabIndex={0}>
      {images.map(({ node: image }) => (
        <picture className={styles.picture} key={image.title}>
          <Image
            alt={image.title}
            className={styles.heroImage}
            height={image.dimension.height}
            src={image.url}
            width={image.dimension.width}
          />
        </picture>
      ))}
    </div>
  )
}