'use client';

import Link from 'next/link';
import { Bell, Package, DollarSign, Bike, AlertCircle, CheckCircle } from 'lucide-react';

const mockNotifications = [
  { id: '1', type: 'rental', title: 'New Rental Started', message: 'Your bike AB-1234 has been rented by rider MR-456', time: '5 min ago', read: false },
  { id: '2', type: 'earning', title: 'Earning Credited', message: '৳450 has been added to your wallet from bike CD-5678', time: '2 hours ago', read: false },
  { id: '3', type: 'success', title: 'Withdrawal Complete', message: 'Your withdrawal of ৳5,000 has been processed successfully', time: '1 day ago', read: true },
  { id: '4', type: 'alert', title: 'Maintenance Alert', message: 'Bike XY-9012 requires maintenance attention', time: '2 days ago', read: true },
];

const iconMap: Record<string, any> = {
  rental: Bike, earning: DollarSign, success: CheckCircle, alert: AlertCircle, default: Package,
};

export default function InvestorNotification({ isMobile = false }: { isMobile?: boolean }) {
  const unreadCount = mockNotifications.filter(n => !n.read).length;

  if (isMobile) {
    return (
      <div className="lg:hidden fixed top-0 left-0 right-0 h-14 bg-white border-b border-slate-200 flex items-center justify-between px-4 z-40">
        <div className="flex items-center gap-2">
          <h1 className="text-lg font-extrabold text-accent">JAIBEN</h1>
          <span className="text-[10px] text-accent font-medium">Investor</span>
        </div>
        <Link href="/investor/notifications" className="relative p-2 hover:bg-slate-100 rounded-lg transition-colors">
          <Bell className="w-5 h-5 text-slate-600" />
          {unreadCount > 0 && (
            <span className="absolute top-1 right-1 w-4 h-4 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
              {unreadCount}
            </span>
          )}
        </Link>
      </div>
    );
  }

  return (
    <div className="hidden lg:block">
      <Link href="/investor/notifications" className="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
        <div className="flex items-center gap-3">
          <Bell className="w-5 h-5 text-slate-600" />
          <span className="text-sm font-medium text-slate-700">Notifications</span>
        </div>
        {unreadCount > 0 && (
          <span className="px-2 py-0.5 bg-accent text-white text-xs font-bold rounded-full">{unreadCount}</span>
        )}
      </Link>
    </div>
  );
}