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

import { VideoPlayer } from "@scandic-hotels/design-system/VideoPlayer"

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

import type { ComponentProps } from "react"

interface HeroVideoProps
  extends Omit<ComponentProps<typeof VideoPlayer>, "className" | "variant"> {
  className?: string
  isFullWidth?: boolean
}

export function HeroVideo({
  className,
  isFullWidth,
  ...props
}: HeroVideoProps) {
  return (
    <div
      className={cx(styles.videoWrapper, className, {
        [styles.fullWidth]: isFullWidth,
      })}
    >
      <VideoPlayer variant="hero" {...props} />
    </div>
  )
}