'use client'

import type * as React from 'react'
import { usePageBoundaryBlurVisibility } from '@admin/hooks/use-page-boundary-blur-visibility'
import { cn } from '@admin/utils/shared/cn'
import { motion } from 'motion/react'

type ProgressiveBlurProps = React.ComponentProps<typeof motion.div> & {
  backgroundColor?: string
  position?: 'top' | 'bottom'
  height?: React.CSSProperties['height']
  blurAmount?: string
  scrollAware?: boolean
}

function ProgressiveBlur({
  className,
  style,
  backgroundColor = 'var(--background)',
  position = 'top',
  height = '150px',
  blurAmount = '0',
  scrollAware = true,
  ...props
}: ProgressiveBlurProps) {
  const isVisible = usePageBoundaryBlurVisibility(position, {
    disabled: !scrollAware
  })

  return (
    <motion.div
      aria-hidden="true"
      data-slot="progressive-blur"
      data-position={position}
      initial={false}
      animate={{ opacity: isVisible ? 1 : 0 }}
      transition={{ duration: 0.16, ease: 'easeOut' }}
      className={cn(
        'pointer-events-none h-(--progressive-blur-height) w-full shrink-0 mask-(--progressive-blur-mask) [backdrop-filter:blur(var(--progressive-blur-amount))] select-none [-webkit-backdrop-filter:blur(var(--progressive-blur-amount))] [-webkit-mask-image:var(--progressive-blur-mask)] [background:var(--progressive-blur-background)]',
        className
      )}
      style={
        {
          '--progressive-blur-height': typeof height === 'number' ? `${height}px` : height,
          '--progressive-blur-amount': blurAmount,
          '--progressive-blur-background':
            position === 'top'
              ? `linear-gradient(to top, transparent, ${backgroundColor})`
              : `linear-gradient(to bottom, transparent, ${backgroundColor})`,
          '--progressive-blur-mask':
            position === 'top'
              ? 'linear-gradient(to bottom, inherit 10%, transparent)'
              : 'linear-gradient(to top, inherit 10%, transparent)',
          ...style
        } as React.ComponentProps<typeof motion.div>['style']
      }
      {...props}
    />
  )
}

export { ProgressiveBlur }