import { Info } from 'lucide-react';
import type { ReactNode } from 'react';

import styles from './Callout.module.css';
import { icon } from './icon';

interface Props {
  /** Спокойная ступень или та, что просит посмотреть глазами. Заливки текста нет ни у одной. */
  tone: 'note' | 'quiet';
  caption: string;
  children?: ReactNode;
}

/**
 * Выноска по образцу antigravity_chat.png: тонкая полоска у левого края и подпись, без заливки
 * текста и без значков-восклицаний. Промт §3.8: если экран выглядит тревожным — он неправильный,
 * замечание это приглашение посмотреть, а не сигнал аварии.
 *
 * ⚠ Замечание владельца 10: полоску «не удалось прочитать» — она висела отдельно от подписи,
 * и её значение приходилось угадывать. Полоска и подпись сведены в ОДНУ пару: значок стоит
 * у самой полоски, а наведение на блок подсвечивает обе разом. Слово ступени тут по-прежнему
 * не выдумывается — оно продуктовое и стоит на владельце (Ф-21, В-3).
 */
export function Callout({ tone, caption, children }: Props) {
  return (
    <div className={styles.callout} data-tone={tone}>
      <p className={styles.caption}>
        <Info {...icon} className={styles.mark} />
        {caption}
      </p>
      {children}
    </div>
  );
}