function blockquote({ node, children, ...props }: any) {
  const alertKeywords: any = {
    '[!NOTE]': { color: 'blue', icon: FaInfoCircle },
    '[!TIP]': { color: 'green', icon: FaLightbulb },
    '[!IMPORTANT]': { color: 'purple', icon: FaExclamationCircle },
    '[!WARNING]': { color: 'yellow', icon: FaExclamationTriangle },
    '[!CAUTION]': { color: 'orange', icon: FaBell },
    '[!DANGER]': { color: 'red', icon: FaSkull }
  };

  let alertType: any = null;
  let contentWithoutAlert: any = [];

  // Function to recursively search for and remove alert text
  const processNode = (node: React.ReactNode): React.ReactNode => {
    if (typeof node === 'string') {
      const trimmedNode = node.trim();
      const foundAlertType = Object.keys(alertKeywords).find(keyword => trimmedNode.startsWith(keyword));
      if (foundAlertType && !alertType) {
        alertType = foundAlertType;
        return trimmedNode.slice(foundAlertType.length).trim();
      }
      return node;
    }
    if (React.isValidElement(node)) {
      return React.cloneElement(node, {}, React.Children.map(node.props.children, processNode));
    }
    return node;
  };

  
  contentWithoutAlert = React.Children.map(children, processNode);
  if(alertType == undefined){
    alertType='[!NOTE]'
  }

  const alertStyle = alertType ? alertKeywords[alertType] : null;

  return (
    <div className={`rounded-sm py-3 px-4 my-3 border-l-4 ${
      alertStyle ? `border-${alertStyle.color}-500` : 'border-[#dedede]'
    }`}>
      {alertStyle && (
        <div className={`mb-2 text-sm font-semibold text-${alertStyle.color}-500 flex items-center`}>
          <alertStyle.icon className="mr-2 text-lg" />
          {alertType.slice(2, -1)}
        </div>
      )}
      <div className="text-gray-200 text-sm">
        {contentWithoutAlert}
      </div>
    </div>
  );
}