通知センターNotificationCenterExperimental

import { NotificationCenter, type Notification, type NotificationCenterLabels } from "@gunjo/ui"
import { useState } from "react"

const labels: NotificationCenterLabels = {
  toggle: "通知を開く",
  title: "通知",
  clearAll: "すべて既読",
  emptyTitle: "通知はありません",
  markAsRead: "既読にする",
  viewHistory: "通知履歴をすべて見る",
}

const initialNotifications: Notification[] = [
  {
    id: "project-approved",
    title: "レビューが承認されました",
    description: "デザインシステムの更新レビューが承認されました。",
    timestamp: "5分前",
    read: false,
  },
  {
    id: "comment",
    title: "新しいコメント",
    description: "Hikaby がプルリクエストにコメントしました。",
    timestamp: "1時間前",
    read: false,
  },
  {
    id: "deploy",
    title: "デプロイ完了",
    description: "本番デプロイ #1234 が完了しました。",
    timestamp: "昨日",
    read: true,
  },
]

export function Notifications() {
  const [notifications, setNotifications] = useState(initialNotifications)

  return (
    <NotificationCenter
      notifications={notifications}
      labels={labels}
      onMarkAsRead={(id) =>
        setNotifications((current) =>
          current.map((notification) =>
            notification.id === id ? { ...notification, read: true } : notification
          )
        )
      }
      onClearAll={() =>
        setNotifications((current) =>
          current.map((notification) => ({ ...notification, read: true }))
        )
      }
    />
  )
}