src/components/ToxicityAlertRail.tsx

import React from 'react';
import { useOncologyStore, type ToxicityAlert } from '../store/useOncologyStore';

const ToxicityAlertRail = () => {
  const alerts = useOncologyStore((state) => state.alerts);

  if (alerts.length === 0) return null;

  return (
    <div className="fixed right-4 top-20 w-80 space-y-3 z-50">
      <h3 className="text-sm font-bold text-gray-500 uppercase tracking-wider ml-1">
        Clinical Alerts
      </h3>
      {alerts.map((alert: ToxicityAlert, i: number) => (
        <div 
          key={alert.id || i} 
          className="p-4 rounded-lg border-l-4 border-red-500 bg-white shadow-lg animate-in fade-in slide-in-from-right duration-300"
        >
          <div className="flex justify-between items-start mb-1">
            <span className="text-xs font-bold px-2 py-0.5 rounded bg-red-100 text-red-700">
              Grade {alert.grade}
            </span>
            <span className="text-[10px] text-gray-400">{alert.timestamp}</span>
          </div>
          <h4 className="font-bold text-gray-800 text-sm">{alert.symptom}</h4>
          <p className="text-xs text-gray-600 mt-1 leading-relaxed">
            {alert.recommendation}
          </p>
        </div>
      ))}
    </div>
  );
};

export default ToxicityAlertRail;