'use client'

import { ChevronRight, Sparkles } from 'lucide-react'
import { formatDate, relativeTime, type Slot } from '@/lib/api/types'

interface SlotAlertProps {
  slot: Slot
  onView: () => void
}

export function SlotAlert({ slot, onView }: SlotAlertProps) {
  return (
    <div className="slot-alert">
      <div className="alert-icon">
        <Sparkles size={18} />
      </div>
      <div className="alert-copy">
        <div className="eyebrow green-text">
          <span className="pulse" /> New slot available{' '}
          <span className="alert-time" suppressHydrationWarning>
            Detected {relativeTime(slot.detectedAt)}
          </span>
        </div>
        <h3>
          Appointment slot found for <span>{slot.applicationId}</span>
        </h3>
        <div className="slot-meta">
          <span>
            <span className="meta-label">Location</span>
            {slot.location}
          </span>
          <span>
            <span className="meta-label">Date</span>
            {formatDate(slot.date)}
          </span>
          <span>
            <span className="meta-label">Time</span>
            {slot.time}
          </span>
        </div>
      </div>
      <button className="outline-button" onClick={onView}>
        View details <ChevronRight size={14} />
      </button>
    </div>
  )
}