n3wt-school/Front-End/src/components/AlertMessage.js

import React from 'react';

const AlertMessage = ({
  type = 'info',
  title,
  message,
  actionLabel,
  onAction,
}) => {
  const typeStyles = {
    info: 'bg-blue-100 border-blue-500 text-blue-700',
    warning: 'bg-yellow-100 border-yellow-500 text-yellow-700',
    error: 'bg-red-100 border-red-500 text-red-700',
    success: 'bg-green-100 border-green-500 text-green-700',
  };

  const alertStyle = typeStyles[type] || typeStyles.info;

  return (
    <div className={`alert centered border-l-4 p-4 rounded ${alertStyle}`} role="alert">
      <h3 className="font-headline font-bold">{title}</h3>
      <p className="mt-2">{message}</p>
      {actionLabel && onAction && (
        <div className="alert-actions mt-4">
          <button
            className="bg-primary text-white font-label font-medium rounded px-4 py-2 hover:bg-secondary transition-colors min-h-[44px]"
            onClick={onAction}
          >
            {actionLabel}
          </button>
        </div>
      )}
    </div>
  );
};

export default AlertMessage;