import * as React from 'react';
import { Alert, IconButton } from '@tnsu/ui-kit';
import styles from './BinderPage.module.scss';

interface Props {
  variant: 'warn' | 'ok' | 'err' | 'info';
  dismissLabel: string;
  onDismiss: () => void;
  children: React.ReactNode;
}

// Alert из ui-kit не закрывается, а MessageBar в binder закрывался крестиком — добавляем его рядом.
// Такой же компонент есть в pages/resources — кандидат на перенос в shared/components.
export const DismissibleAlert: React.FC<Props> = ({ variant, dismissLabel, onDismiss, children }) => (
  <div className={styles.dismissibleAlert}>
    <div className={styles.dismissibleAlertBody}>
      <Alert variant={variant}>{children}</Alert>
    </div>
    <IconButton icon="close" title={dismissLabel} size="sm" onClick={onDismiss} />
  </div>
);