import { useState } from "react";
import { Bell } from "lucide-react"; // lucide-react'ten Bell iconunu import ediyoruz

export default function Notifications() {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  // Son 5 notification
  const notifications = [
    "Yeni mesaj aldınız.",
    "Profiliniz güncellendi.",
    "Yeni takipçi eklediniz.",
    "Yorumunuzu beğendiler.",
    "Yeni bir yorum yazıldı.",
  ];

  return (
    <div className="relative">
      {/* Notification Icon (🔔) */}
      <button
        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
        className="text-2xl hover:text-primary transition"
      >
        <Bell size={24} className="text-grey" />
      </button>

      {/* Notification Dropdown */}
      {isDropdownOpen && (
        <div className="absolute right-0 mt-2 w-64 bg-white text-black rounded-lg shadow-lg p-4">
          {/* Son 5 notification */}
          <ul className="space-y-3">
            {notifications.slice(0, 5).map((notification, index) => (
              <li key={index} className="text-sm">{notification}</li>
            ))}
          </ul>

          {/* Daha Fazla Butonu */}
          <button
            onClick={() => console.log("Daha fazla notification gösterilecek!")}
            className="mt-3 text-sm text-blue-600 hover:underline"
          >
            Daha Fazla
          </button>
        </div>
      )}
    </div>
  );
}
