/**
 * Заголовок секции дашборда в стиле iOS 26.
 * Выравнивание по левому краю, крупный шрифт.
 */

'use client';

import React from 'react';

export interface SectionHeaderProps {
  title: string;
  /** Дополнительный элемент справа (кнопки, селект и т.д.) */
  trailing?: React.ReactNode;
  className?: string;
}

export const SectionHeader: React.FC<SectionHeaderProps> = ({
  title,
  trailing,
  className = '',
}) => {
  return (
    <div
      className={className}
      style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 'var(--ios26-spacing-md)',
        gap: 16,
      }}
    >
      <h2 className="ios26-section-title" style={{ margin: 0 }}>
        {title}
      </h2>
      {trailing}
    </div>
  );
}