import React from 'react'

type FixedAspectRatioProps = {
  width: number
  height: number
  style?: React.CSSProperties
  element?: string
  [key:string]: string | boolean | React.ReactNode | React.CSSProperties
}

/**
 * High Order Component that forces a fixed aspect ratio to prevent Cumulative Layout Shift
 * for elements that have a deterministic aspect ratio server-side
 */
export const FixedAspectRatio: React.FC<React.PropsWithChildren<FixedAspectRatioProps>> = ({
  width,
  height,
  children,
  style = {},
  element = 'div',
  ...otherProps
}) => {
  let fixedAspectRatioStyles
  if (!width || !height) {
    fixedAspectRatioStyles = {
      height: `fit-content`,
      width: '100%',
    }
  } else {
    fixedAspectRatioStyles = {
      aspectRatio: `${width}/${height}`,
      width: '100%',
    }
  }

  return React.createElement(
    element,
    { ...otherProps, style: { ...style, ...fixedAspectRatioStyles } },
    children
  )
}