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-[#202835] bg-[#10151d] 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-[#273447] bg-[#131d2b] px-3 py-2 text-xs uppercase tracking-[0.18em] text-[#9bb6d4] transition-colors hover:border-[#466789] hover:text-[#eef4ff]"
      >
        {label}
      </button>
    ))}
  </div>
);
