import * as React from 'react';
import styles from './DataTable.module.scss';
import { Icon } from './Icon';

export interface ICellNoteProps {
  children: React.ReactNode;
  /** 'warn' — амбер с иконкой (например, причина от бэкенда), 'muted' — нейтральная пометка. */
  kind?: 'warn' | 'muted';
}

/** Пояснение под основным значением ячейки — например, причина, по которой оно пустое. */
export const CellNote: React.FC<ICellNoteProps> = ({ children, kind = 'muted' }) => (
  <span className={`${styles.cellNote} ${kind === 'warn' ? styles.cellNoteWarn : ''}`}>
    {kind === 'warn' && <Icon name="warning" size="sm" />}
    <span>{children}</span>
  </span>
);