import Alert from '../alert';
import { clsx } from 'clsx';

export type CriticalCommsBannerProps = {
  title: string;
  subtitle?: string;
  action?: {
    label: string;
    href?: string;
    onClick?: () => void;
  };
  className?: string;
};

function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {
  return (
    <div className={clsx('critical-comms', className)}>
      <Alert
        title={title}
        message={subtitle}
        action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}
        className={className}
        type="warning"
      />
    </div>
  );
}

export default CriticalCommsBanner;
