import { CSSProperties, ReactNode } from 'react'
import { tokens } from '../../systems/tokens'
import { createPortal } from 'react-dom'

const base: CSSProperties = {
  background  : 'rgba(15,17,23,.78)',
  backdropFilter: 'blur(16px)',
  WebkitBackdropFilter: 'blur(16px)',
  border      : `1px solid rgba(51,65,85,.6)`,
  borderRadius: tokens.radius.lg,
  boxShadow   : tokens.shadow.lg,
  transition  : `border-color ${tokens.animation.quick}s,
                 box-shadow  ${tokens.animation.quick}s`,
  overflow    : 'hidden',
}

export function Card({
  children, style, elevated = false, glow = false,
}: {
  children : ReactNode
  style    ?: CSSProperties
  elevated ?: boolean   // corrige badge 1000000000
  glow     ?: boolean
}) {
  return (
    <div
      style={{
        ...base,
        ...(elevated ? { borderColor:'rgba(96,165,250,.3)', boxShadow:'0 0 40px rgba(37,99,235,.15)' } : {}),
        ...(glow     ? { boxShadow: '0 0 30px rgba(37,99,235,.20), inset 0 0 20px rgba(37,99,235,.05)' } : {}),
        ...style,
      }}
    >
      {children}
    </div>
  )
}