/**
 * The Alert component is used to display different types of alerts or notifications
 * with different styles based on the provided type prop.
 *
 * @param {Object} props - Props received by the component.
 * @param {ReactNode} props.children - The content to be displayed inside the alert.
 * @param {string} props.className - Additional CSS class names for the alert.
 * @param {string} props.type - The type of the alert ('info', 'success', or 'warning').
 * @returns {JSX.Element} - Rendered Alert component.
 */
const Alert = ({ children, className, type }) => {
  let typeClass = ''
  switch (type) {
    case 'info':
      typeClass = 'bg-blue-100 text-blue-900 border-blue-400'
      break
    case 'success':
      typeClass = 'bg-green-100 text-green-900 border-green-400'
      break
    case 'warning':
      typeClass = 'bg-yellow-100 text-yellow-900 border-yellow-400'
      break
  }
  return (
    <div className={`rounded-md w-full text-medium p-3 border ${typeClass} ${className}`}>
      {children}
    </div>
  )
}

export default Alert