Mobile Notifications

// iOS-style banner notification inside a phone frame
// For real apps, use the OS notification API (Expo Notifications / FCM)

import { useState, useEffect } from "react";
import { MessageCircle } from "lucide-react";
import { cn } from "@/lib";

interface BannerProps {
  visible: boolean;
  icon: React.ReactNode;
  app: string;
  title: string;
  body: string;
  onDismiss: () => void;
  duration?: number; // ms, default 3500
}

export function NotificationBanner({
  visible, icon, app, title, body, onDismiss, duration = 3500,
}: BannerProps) {
  useEffect(() => {
    if (!visible) return;
    const t = setTimeout(onDismiss, duration);
    return () => clearTimeout(t);
  }, [visible, duration, onDismiss]);

  return (
    <div
      className={cn(
        "fixed top-safe-top left-0 right-0 z-50 px-3 pt-2 transition-transform duration-300",
        visible ? "translate-y-0" : "-translate-y-full"
      )}
    >
      <div className="flex items-start gap-2.5 px-3 py-2.5 rounded-2xl
        bg-surface-raised/90 backdrop-blur-sm border border-border
        shadow-[0_4px_20px_rgba(0,0,0,0.25)]">
        <div className="w-8 h-8 rounded-xl bg-surface flex items-center justify-center flex-shrink-0">
          {icon}
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-baseline justify-between gap-1">
            <span className="text-[10px] font-semibold text-text-tertiary uppercase tracking-wide truncate">{app}</span>
            <span className="text-[10px] text-text-tertiary flex-shrink-0">now</span>
          </div>
          <p className="text-[12px] font-semibold text-text-primary truncate">{title}</p>
          <p className="text-[11px] text-text-secondary truncate">{body}</p>
        </div>
      </div>
    </div>
  );
}

// Usage
export function Example() {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <button onClick={() => setVisible(true)}>Trigger notification</button>
      <NotificationBanner
        visible={visible}
        icon={<MessageCircle className="w-4 h-4 text-blue-400" />}
        app="Messages"
        title="Jamie replied to you"
        body="Sounds good, see you at 3pm!"
        onDismiss={() => setVisible(false)}
      />
    </>
  );
}