import React from 'react';
import OrnamentBloom from './OrnamentBloom';

export default function TitleBlock({
  title, subtitle, color = '#1F2A44', subColor = '#6B6B6B',
  center = true, withBloom = true, gold = '#D4AF37',
}) {
  return (
    <div style={{ textAlign: center ? 'center' : 'left' }}>
      {withBloom && center && (
        <div style={{
          display: 'flex', justifyContent: 'center', gap: 12,
          alignItems: 'center', marginBottom: 10, color: gold,
        }}>
          <svg width="40" height="6" viewBox="0 0 40 6">
            <path d="M0 3 L36 3" stroke={gold} strokeWidth="1" />
            <circle cx="38" cy="3" r="1.5" fill={gold} />
          </svg>
          <OrnamentBloom size={18} color={gold} />
          <svg width="40" height="6" viewBox="0 0 40 6">
            <circle cx="2" cy="3" r="1.5" fill={gold} />
            <path d="M4 3 L40 3" stroke={gold} strokeWidth="1" />
          </svg>
        </div>
      )}
      <h1 className="font-title" style={{
        margin: 0, fontSize: 30, color, letterSpacing: '-0.02em',
      }}>{title}</h1>
      {subtitle && (
        <div style={{
          marginTop: 6, fontSize: 13, color: subColor, lineHeight: 1.55,
          letterSpacing: '-0.01em',
        }}>{subtitle}</div>
      )}
    </div>
  );
}