"use client";

import { useState } from "react";
import SideNav from "@/components/side-nav";
import { Notifications, Notification } from "@/components/notifications";

export default function NotificationsPage() {
  const [notifications, setNotifications] = useState<Notification[]>([
    {
      id: "1",
      type: "appointment",
      title: "New Appointment Request",
      message: "Sarah Johnson requested an appointment for tomorrow at 2:00 PM",
      time: "2 minutes ago",
      read: false,
    },
    {
      id: "2",
      type: "success",
      title: "Appointment Confirmed",
      message: "Your appointment with Michael Chen has been confirmed for today at 10:00 AM",
      time: "1 hour ago",
      read: false,
    },
    {
      id: "3",
      type: "warning",
      title: "Appointment Reminder",
      message: "You have an appointment in 30 minutes with Emily Davis",
      time: "3 hours ago",
      read: false,
    },
    {
      id: "4",
      type: "info",
      title: "New Message",
      message: "You received a new message from John Smith",
      time: "5 hours ago",
      read: true,
    },
    {
      id: "5",
      type: "appointment",
      title: "Appointment Cancelled",
      message: "Robert Wilson cancelled his appointment scheduled for tomorrow",
      time: "1 day ago",
      read: true,
    },
  ]);

  const handleMarkAsRead = (id: string) => {
    setNotifications((prev) =>
      prev.map((n) => (n.id === id ? { ...n, read: true } : n))
    );
  };

  const handleDismiss = (id: string) => {
    setNotifications((prev) => prev.filter((n) => n.id !== id));
  };

  const handleMarkAllAsRead = () => {
    setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Side Navigation */}
      <SideNav />

      <div className="md:ml-[250px]">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <Notifications
            notifications={notifications}
            onMarkAsRead={handleMarkAsRead}
            onDismiss={handleDismiss}
            onMarkAllAsRead={handleMarkAllAsRead}
          />
        </div>
      </div>
    </div>
  );
}