Notification Center View

struct NotificationCenterView: View {
    @State private var notifications: [AppNotification] = sampleNotifications
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: 18) {
                    ForEach(notifications) { notification in
                        NotificationRow(notification: notification)
                    }
                }
                .padding(.vertical, 24)
            }
            .navigationTitle("Notifications")
            .background(
                LinearGradient(gradient: Gradient(colors: [Color.blue.opacity(0.10), Color.purple.opacity(0.08)]), startPoint: .top, endPoint: .bottom)
                    .ignoresSafeArea()
            )
        }
    }
}

struct AppNotification: Identifiable {
    let id = UUID()
    let icon: String // SF Symbol
    let title: String
    let message: String
    let timestamp: String
    let isRead: Bool
}

let sampleNotifications: [AppNotification] = [
    .init(icon: "envelope.badge", title: "New Message", message: "You have a new message from Alice.", timestamp: "2m ago", isRead: false),
    .init(icon: "cart.fill", title: "Order Shipped", message: "Your order #1002 has shipped.", timestamp: "1h ago", isRead: true),
    .init(icon: "star.fill", title: "Achievement Unlocked", message: "Congrats! You reached Gold status.", timestamp: "Yesterday", isRead: false),
    .init(icon: "bell.fill", title: "Reminder", message: "Don't forget your meeting at 3 PM.", timestamp: "2d ago", isRead: true)
]

struct NotificationRow: View {
    let notification: AppNotification
    var body: some View {
        HStack(alignment: .top, spacing: 14) {
            ZStack {
                Circle()
                    .fill(notification.isRead ? Color(.systemGray5) : Color.blue.opacity(0.18))
                    .frame(width: 44, height: 44)
                Image(systemName: notification.icon)
                    .font(.system(size: 22))
                    .foregroundColor(notification.isRead ? .gray : .blue)
            }
            VStack(alignment: .leading, spacing: 4) {
                HStack {
                    Text(notification.title)
                        .font(.headline)
                        .foregroundColor(.primary)
                    if !notification.isRead {
                        Circle()
                            .fill(Color.blue)
                            .frame(width: 8, height: 8)
                    }
                }
                Text(notification.message)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
                Text(notification.timestamp)
                    .font(.caption)
                    .foregroundColor(.secondary)
            }
            Spacer()
        }
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16, style: .continuous)
                .fill(Color(.systemBackground).opacity(notification.isRead ? 0.5 : 0.8))
        )
        .padding(.horizontal)
    }
}