import type { Notification } from '@/lib/notificationService'
import { NotificationContent } from './NotificationContent'
import { NotificationActions } from './NotificationActions'

interface NotificationItemProps {
  notification: Notification
  onNotificationClick: (notification: Notification) => void
  onDelete: (id: string) => void
}

export function NotificationItem({
  notification,
  onNotificationClick,
  onDelete,
}: NotificationItemProps): React.ReactElement {
  const handleDelete = (): void => {
    onDelete(notification.id)
  }

  return (
    <div
      className={`p-4 hover:bg-gray-50 transition-colors cursor-pointer relative ${
        !notification.read ? 'bg-blue-50' : ''
      }`}
      onClick={() => onNotificationClick(notification)}
    >
      {!notification.read && (
        <div className="absolute top-2 right-2 w-2 h-2 bg-orange-500 rounded-full" />
      )}
      <div className="flex items-start justify-between">
        <NotificationContent notification={notification} />
        <NotificationActions timestamp={notification.timestamp} onDelete={handleDelete} />
      </div>
    </div>
  )
}