import React from 'react'
import Link from 'next/link'
import type { Notification } from '@/types/notifications'
import { formatTime } from '@/lib/formatTime'

interface NotificationContentProps {
  notification: Notification
}

export function NotificationContent({ notification }: NotificationContentProps) {
  return (
    <div className="flex-1 min-w-0">
      <div className="flex items-center gap-2 mb-1">
        <p className="text-sm font-medium text-gray-900">{notification.title}</p>
        {!notification.read && (
          <span className="w-2 h-2 bg-blue-600 rounded-full flex-shrink-0" />
        )}
      </div>
      <p className="text-sm text-gray-600">{notification.message}</p>
      {notification.articleId && (
        <Link
          href="/"
          onClick={(e) => e.stopPropagation()}
          className="text-xs text-blue-600 hover:text-blue-700 mt-1 inline-block"
        >
          View article →
        </Link>
      )}
    </div>
  )
}