import classNames from 'classnames';
import { Notice as WordpressNotice } from '@wordpress/components';
import { useState } from '@wordpress/element';

type NoticeProps = {
  children: React.ReactNode;
  className?: string;
  status?: 'success' | 'error' | 'warning' | 'info';
};

export const Notice = ({
  children,
  status = 'success',
  className,
}: NoticeProps) => {
  const [showNotice, setShowNotice] = useState(true);

  return (
    <div onClick={() => setShowNotice(false)}>
      {showNotice && (
        <WordpressNotice
          status={status}
          className={classNames(className)}
          onRemove={() => setShowNotice(false)}
        >
          {children}
        </WordpressNotice>
      )}
    </div>
  );
};