interface Props {
  order: number | undefined
  size: number | undefined
  color: string | undefined
  orientation: string | undefined
  margins: string | undefined
}

export const Separator = ({ order, size, color, orientation, margins }: Props) => {
  const getSizeStyle = (orientation: any, size: any) => {
    if (orientation === 'h') {
      return {
        width: size ?? 0,
        height: '100%'
      }
    } else {
      return {
        height: size ?? 0,
        width: '100%'
      }
    }
  }

  if (order === 3) return null
  const sizeStyle = getSizeStyle(orientation, size)
  return (
    <div style={{
      flexShrink: 0,
      order: order,
      backgroundColor: color ?? '',
      margin: margins,
      ...sizeStyle
    }} />
  )
}

