import { ISpacer } from './Spacer.interface'
import React from 'react'
import { StyledSpacer } from './Spacer.theme'

const Spacer = ({
  id,
  color,
  customHeight,
  height,
  className,
  ...props
}: ISpacer) => {
  return (
    <StyledSpacer
      id={id}
      className={className}
      style={{
        backgroundColor: color ? color : ``,
        height: customHeight ? customHeight : `var(--space-${String(height)})`
      }}
      aria-hidden="true"
      {...props}
    />
  )
}

export default Spacer