'use client'

import { AlertTriangle, ExternalLink } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { TFR } from '@/lib/types'

interface TfrBannerProps {
  tfrs: TFR[]
  className?: string
}

export function TfrBanner({ tfrs, className }: TfrBannerProps) {
  if (!tfrs || tfrs.length === 0) return null

  return (
    <div
      className={cn(
        'flex items-start gap-3 rounded-lg border border-red-500 bg-red-50 dark:bg-red-950 p-4',
        className
      )}
      role="alert"
    >
      <AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
      <div className="flex-1">
        <p className="text-sm font-medium text-red-800 dark:text-red-200">
          {tfrs.length} Active TFR{tfrs.length !== 1 ? 's' : ''} in Area
        </p>
        <ul className="mt-1 space-y-1">
          {tfrs.map((tfr) => (
            <li key={tfr.notam_id} className="text-xs text-red-700 dark:text-red-300">
              <span className="font-medium">{tfr.type}</span>
              {tfr.description && <> &mdash; {tfr.description}</>}
              {tfr.detail_url && (
                <a
                  href={tfr.detail_url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="ml-1 inline-flex items-center gap-0.5 text-red-600 dark:text-red-400 hover:underline"
                >
                  Details <ExternalLink className="h-3 w-3" />
                </a>
              )}
            </li>
          ))}
        </ul>
        <a
          href="https://tfr.faa.gov/tfr3/"
          target="_blank"
          rel="noopener noreferrer"
          className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400 hover:underline"
        >
          View all TFRs on FAA website <ExternalLink className="h-3 w-3" />
        </a>
      </div>
    </div>
  )
}