import React from 'react'

import './rotationTestStyle.css'

// Web-only rotating gradient border container
// Props:
// - active: animate rotation (default true)
// - colors: [primary, secondary] gradient colors
// - duration: animation duration in seconds
// - borderWidth: width of the gradient border (px)
// - borderRadius: optional corner radius (px)
// - fillColor: background color applied inside the border
// - style, className: optional DOM styles/classes
const RotationBorder = ({
  children,
  style,
  className,
  active = true,
  colors = ['#F94697', '#7023F7'],
  duration = 5,
  borderWidth = 1,
  borderRadius,
  fillColor = 'transparent',
}) => {
  const classes = [
    'rotation-border',
    active ? 'rotation-border--active' : 'rotation-border--static',
    className,
  ]
    .filter(Boolean)
    .join(' ')

  const inlineStyle = { ...style }

  inlineStyle['--rotation-border-width'] = `${borderWidth}px`
  inlineStyle['--rotation-border-color-1'] = colors[0]
  inlineStyle['--rotation-border-color-2'] = colors[1] ?? colors[0]
  inlineStyle['--rotation-border-duration'] = `${duration}s`
  inlineStyle['--rotation-border-fill'] = fillColor

  if (typeof borderRadius !== 'undefined') {
    inlineStyle.borderRadius = borderRadius
  }

  if (typeof inlineStyle.borderRadius !== 'undefined') {
    inlineStyle['--rotation-border-radius'] =
      typeof inlineStyle.borderRadius === 'number'
        ? `${inlineStyle.borderRadius}px`
        : inlineStyle.borderRadius
  }

  return (
    <div className={classes} style={inlineStyle}>
      {children}
    </div>
  )
}

export default RotationBorder