Notification

import { Notification, NotificationList } from '@/components/ui/notification'

export default function NotificationCenter() {
  const [notifications, setNotifications] = useState([
    { id: 1, title: 'New message', description: 'You have a new message', timestamp: '2 min ago', read: false },
    { id: 2, title: 'Update complete', description: 'Your profile has been updated', timestamp: '1 hour ago', read: true },
  ])

  const dismiss = (id: number) => {
    setNotifications(prev => prev.filter(n => n.id !== id))
  }

  const markAsRead = (id: number) => {
    setNotifications(prev => prev.map(n =>
      n.id === id ? { ...n, read: true } : n
    ))
  }

  return (
    <NotificationList emptyMessage="You're all caught up!">
      {notifications.map(n => (
        <Notification
          key={n.id}
          title={n.title}
          description={n.description}
          timestamp={n.timestamp}
          read={n.read}
          onClick={() => markAsRead(n.id)}
          onDismiss={() => dismiss(n.id)}
        />
      ))}
    </NotificationList>
  )
}