import React from 'react'
import type { Notification } from '@/types/notifications'
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) {
  const handleDelete = () => {
    onDelete(notification.id)
  }

  return (
    <div
      className={`p-4 hover:bg-gray-50 transition-colors cursor-pointer ${
        !notification.read ? 'bg-blue-50' : ''
      }`}
      onClick={() => onNotificationClick(notification)}
    >
      <div className="flex items-start justify-between">
        <NotificationContent notification={notification} />
        <NotificationActions timestamp={notification.timestamp} onDelete={handleDelete} />
      </div>
    </div>
  )
}