import { Bell } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { formatJalaliDateTime } from '../utils/date';
import { usePwaNotification } from './PwaNotificationProvider';
import { getPwaNotificationMessage, getPwaNotificationTarget, getPwaNotificationTitle } from './pwaNotificationUtils';

export default function PwaNotificationItem({ notification }) {
  const navigate = useNavigate();
  const { notify } = usePwaNotification();
  const target = getPwaNotificationTarget(notification);

  const handleClick = () => {
    if (target.available && target.path) {
      navigate(target.path);
      return;
    }

    notify({
      tone: 'error',
      title: 'اعلان',
      message: 'مورد مربوط به این اعلان در دسترس نیست.',
    });
  };

  return (
    <button type="button" className={`pwa-notification ${notification.is_read ? '' : 'unread'}`} onClick={handleClick}>
      <span><Bell size={17} /></span>
      <div>
        <strong>{getPwaNotificationTitle(notification)}</strong>
        <p>{getPwaNotificationMessage(notification)}</p>
        <small>{formatJalaliDateTime(notification.created_at)}</small>
      </div>
    </button>
  );
}
