import type { ReactNode } from 'react'
import { cn } from '@/lib/utils'

export interface CompressionAnimationIconProps {
  size?: number
  className?: string
}

export function CompressionAnimationIcon({ size = 16, className }: CompressionAnimationIconProps) {
  return (
    <span
      className={cn(
        'inline-flex shrink-0 items-center justify-center rounded-sm text-text-tertiary',
        className
      )}
      style={{ width: size, height: size }}
      aria-hidden
    >
      <span className="relative inline-flex size-full items-center justify-center">
        <span className="absolute h-0.5 w-3 rounded-full bg-current opacity-60 motion-safe:animate-[spark-compress-a_1.2s_ease-in-out_infinite]" />
        <span className="absolute h-0.5 w-2 rounded-full bg-current opacity-80 motion-safe:animate-[spark-compress-b_1.2s_ease-in-out_infinite]" />
      </span>
    </span>
  )
}

export interface CompressionDividerProps {
  className?: string
  icon?: ReactNode
  text?: ReactNode
  ariaLabel?: string
  isPlaying?: boolean
}

export function CompressionDivider({
  className,
  icon,
  text = 'Context compressed',
  ariaLabel = 'conversation compression divider',
  isPlaying = false,
}: CompressionDividerProps) {
  return (
    <div
      data-slot="compression-divider"
      className={cn('flex w-full items-center', className)}
      role="separator"
      aria-label={ariaLabel}
    >
      <span className="h-px flex-1 bg-border-tertiary" />
      <span className="mx-2 inline-flex items-center justify-center gap-1 text-text-tertiary">
        {icon ?? <CompressionAnimationIcon className={isPlaying ? undefined : '[&_span]:animate-none'} />}
        <span className="whitespace-nowrap text-xs leading-xs text-text-tertiary">{text}</span>
      </span>
      <span className="h-px flex-1 bg-border-tertiary" />
    </div>
  )
}

CompressionAnimationIcon.displayName = 'CompressionAnimationIcon'
CompressionDivider.displayName = 'CompressionDivider'
export const ContextCompressionDivider = CompressionDivider
export type ContextCompressionDividerProps = CompressionDividerProps