import { cx } from "class-variance-authority"

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

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

import type { ComponentProps } from "react"

type HeroProps = Pick<
  ComponentProps<typeof Image>,
  "className" | "alt" | "src" | "focalPoint" | "dimensions"
>

export default async function Hero({ className, alt, ...props }: HeroProps) {
  return (
    <Image
      className={cx(styles.hero, className)}
      alt={alt}
      height={480}
      width={1196}
      priority
      {...props}
    />
  )
}