import React from 'react'

import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
import { cs } from '../utils'
import { ImageProps } from './image.types'

export const ImageBase = styled.imgBox`
  height: auto;
  object-fit: cover;
  width: 100%;
`

/** Displays an image. Includes base styling. */
export const Image = vui<'img', ImageProps>((props, ref) => {
  const { alt, className, title, ...rest } = omitThemingProps(props)
  const styles = useStyleConfig('Image', props)

  return (
    <ImageBase
      alt={alt ? alt : title ? title : ''}
      className={cs('vui-image', className)}
      ref={ref}
      title={title}
      {...styles}
      {...rest}
    />
  )
})

Image.displayName = 'Image'
export default Image
