pn-new-crm/src/components/notifications/notification-item.tsx

'use client';

import { formatDistanceToNow } from 'date-fns';
import { useRouter } from 'next/navigation';

interface NotificationItemProps {
  notification: {
    id: string;
    type: string;
    title: string;
    description: string | null;
    link: string | null;
    isRead: boolean;
    createdAt: Date;
  };
  onMarkRead: (id: string) => void;
}

export function NotificationItem({ notification, onMarkRead }: NotificationItemProps) {
  const router = useRouter();

  const handleClick = () => {
    if (!notification.isRead) {
      onMarkRead(notification.id);
    }
    if (notification.link) {
      router.push(notification.link);
    }
  };

  return (
    <button
      type="button"
      onClick={handleClick}
      className="w-full text-left flex items-start gap-3 px-4 py-3 hover:bg-muted/50 transition-colors"
    >
      {/* Unread indicator */}
      <div className="mt-1.5 flex-shrink-0">
        {!notification.isRead ? (
          <span className="block h-2 w-2 rounded-full bg-blue-500" />
        ) : (
          <span className="block h-2 w-2 rounded-full bg-transparent" />
        )}
      </div>

      {/* Content */}
      <div className="flex-1 min-w-0">
        <p
          className={`text-sm leading-snug truncate ${
            notification.isRead ? 'text-muted-foreground' : 'text-foreground font-medium'
          }`}
        >
          {notification.title}
        </p>
        {notification.description && (
          <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
            {notification.description}
          </p>
        )}
        <p className="text-xs text-muted-foreground mt-1">
          {formatDistanceToNow(new Date(notification.createdAt), { addSuffix: true })}
        </p>
      </div>
    </button>
  );
}