'use client'

import { AlertTriangle } from 'lucide-react'
import { cn } from '@/lib/utils'
import { differenceInMinutes, parseISO } from 'date-fns'

interface StaleDataBannerProps {
  lastUpdated: string
  thresholdMinutes?: number
  className?: string
}

export function StaleDataBanner({
  lastUpdated,
  thresholdMinutes = 10,
  className,
}: StaleDataBannerProps) {
  const minutesOld = differenceInMinutes(new Date(), parseISO(lastUpdated))
  const isStale = minutesOld > thresholdMinutes

  if (!isStale) return null

  return (
    <div
      className={cn(
        'flex items-center gap-3 rounded-lg border border-yellow-500 bg-yellow-50 dark:bg-yellow-950 p-4',
        className
      )}
      role="alert"
    >
      <AlertTriangle className="h-5 w-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0" />
      <div className="flex-1">
        <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
          Data may be outdated
        </p>
        <p className="text-xs text-yellow-700 dark:text-yellow-300">
          Last updated {minutesOld} minutes ago. Live data may differ.
        </p>
      </div>
    </div>
  )
}