lti-web-client/src/components/Alert.tsx

import { ReactNode, Ref } from 'react';

import { cn } from '@/lib/helper';

interface AlertProps {
  ref?: Ref<HTMLDivElement> | undefined;
  variant?: 'outline' | 'dash' | 'soft';
  color?: 'info' | 'success' | 'warning' | 'error';
  children?: ReactNode;
  className?: string;
}

const Alert = ({ children, ref, variant, color, className }: AlertProps) => {
  const alertBaseClassName = cn('alert', {
    'alert-soft': variant === 'soft',
    'alert-outline': variant === 'outline',
    'alert-dash': variant === 'dash',

    'alert-info': color === 'info',
    'alert-success': color === 'success',
    'alert-warning': color === 'warning',
    'alert-error': color === 'error',
  });

  return (
    <div ref={ref} className={cn(alertBaseClassName, className)}>
      {children}
    </div>
  );
};

export default Alert;