"use client";

import React from "react";
import { FaBell, FaInfoCircle } from "react-icons/fa";
import TabBar from "../components/TabBar";

const notifications = [
  {
    id: 1,
    title: "Обновление приложения",
    date: "15.12.2025",
    type: "update",
    text: "Мы улучшили стабильность работы и ускорили загрузку заявок.",
  },
  {
    id: 2,
    title: "Новые возможности для волонтёров",
    date: "10.12.2025",
    type: "feature",
    text: "Теперь можно оставлять отзывы о заказчиках после выполнения заявок.",
  },
  {
    id: 3,
    title: "Советы по безопасности",
    date: "05.12.2025",
    type: "info",
    text: "Всегда уточняйте детали заявки и не передавайте данные третьим лицам.",
  },
];

const typeConfig = {
  update:  { label: "Обновление", color: "#71A5E9" },
  feature: { label: "Новая функция", color: "#94E067" },
  info:    { label: "Информация", color: "#E9D171" },
};

const NotificationsPage = () => {
  return (
    <div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
      <div className="relative w-full max-w-md flex flex-col pb-20 pt-4">
        {/* Header */}
        <header className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-full border border-white flex items-center justify-center">
              <FaBell className="text-white text-sm" />
            </div>
            <p className="font-montserrat font-extrabold text-[20px] leading-[22px] text-white">
              Уведомления
            </p>
          </div>
        </header>

        {/* Список уведомлений */}
        <main className="bg-white rounded-xl p-4 flex flex-col gap-3 max-h-[80vh] overflow-y-auto">
          {notifications.length === 0 && (
            <p className="font-montserrat text-sm text-black">
              Пока нет уведомлений
            </p>
          )}

          {notifications.map((n) => {
            const cfg = typeConfig[n.type] || {
              label: "Уведомление",
              color: "#E2E2E2",
            };
            return (
              <div
                key={n.id}
                className="w-full rounded-xl bg-[#F5F5F5] px-3 py-3 flex flex-col gap-2"
              >
                <div className="flex items-center justify-between gap-2">
                  <span
                    className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full font-montserrat text-[10px] font-semibold text-white"
                    style={{ backgroundColor: cfg.color }}
                  >
                    <FaInfoCircle className="text-[10px]" />
                    {cfg.label}
                  </span>
                  <p className="font-montserrat text-[10px] text-black/70">
                    {n.date}
                  </p>
                </div>

                <p className="font-montserrat font-semibold text-[14px] text-black">
                  {n.title}
                </p>
                <p className="font-montserrat text-[12px] text-black/80">
                  {n.text}
                </p>
              </div>
            );
          })}
        </main>

        <TabBar />
      </div>
    </div>
  );
};

export default NotificationsPage;