import React from 'react';

interface FormattingToolbarProps {
  onInsert: (kind: 'heading' | 'bullet' | 'quote' | 'callout') => void;
}

export const FormattingToolbar: React.FC<FormattingToolbarProps> = ({ onInsert }) => (
  <div className="flex flex-wrap gap-2 rounded-2xl border border-term-border bg-term-surface p-2">
    {[
      ['heading', 'Heading'],
      ['bullet', 'Bullet'],
      ['quote', 'Quote'],
      ['callout', 'Callout'],
    ].map(([kind, label]) => (
      <button
        key={kind}
        type="button"
        onClick={() => onInsert(kind as 'heading' | 'bullet' | 'quote' | 'callout')}
        className="rounded-xl border border-term-border bg-term-bg px-3 py-2 text-xs uppercase tracking-[0.18em] text-term-text-tertiary transition-colors hover:border-info/60 hover:text-term-text"
      >
        {label}
      </button>
    ))}
  </div>
);
