'use client'

import Link from 'next/link'

export interface RegulatoryNewsItemData {
  id: string
  headline: string
  summary: string
  legal_reference: string
  deadline: string
  days_remaining: number
  urgency: 'critical' | 'high' | 'medium' | 'low'
  affected: string
  action_required: string
  action_link: string
  regulation: string
  sanctions?: string
}

const URGENCY_STYLES = {
  critical: { badge: 'bg-red-100 text-red-700 border-red-200', border: 'border-l-red-500', icon: '🔴' },
  high: { badge: 'bg-orange-100 text-orange-700 border-orange-200', border: 'border-l-orange-400', icon: '🟠' },
  medium: { badge: 'bg-yellow-100 text-yellow-700 border-yellow-200', border: 'border-l-yellow-400', icon: '🟡' },
  low: { badge: 'bg-gray-100 text-gray-600 border-gray-200', border: 'border-l-gray-300', icon: '🔵' },
}

export function RegulatoryNewsCard({ item }: { item: RegulatoryNewsItemData }) {
  const style = URGENCY_STYLES[item.urgency] || URGENCY_STYLES.low

  return (
    <div className={`bg-white border border-gray-200 border-l-4 ${style.border} rounded-lg p-4`}>
      <div className="flex items-start justify-between gap-3">
        <div className="flex-1 min-w-0">
          <h4 className="text-sm font-semibold text-gray-900">{item.headline}</h4>
          <p className="text-xs text-gray-600 mt-1">{item.summary}</p>
          <p className="text-xs text-gray-400 mt-1 italic">{item.legal_reference}</p>
          {item.sanctions && (
            <p className="text-xs text-red-600 mt-1">Sanktionen: {item.sanctions}</p>
          )}
        </div>
        <div className="flex flex-col items-end gap-1 shrink-0">
          <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border ${style.badge}`}>
            {style.icon} {item.days_remaining} Tage
          </span>
          <span className="text-xs text-gray-400">
            {new Date(item.deadline).toLocaleDateString('de-DE')}
          </span>
        </div>
      </div>
      <div className="flex items-center justify-between mt-3 pt-2 border-t border-gray-100">
        <span className="text-xs text-gray-400">{item.affected}</span>
        {item.action_link && (
          <Link href={item.action_link} className="text-xs text-blue-600 hover:underline font-medium">
            Massnahme ergreifen →
          </Link>
        )}
      </div>
    </div>
  )
}