import { Fragment } from 'react';
import { siteConfig } from '@/data/site-config';

// Renders the brand so the first letter of each word ("Techno«S»olaire-«N»ord")
// picks up the main (green) color while the rest stays in the given tone.
// The whole name is one contiguous inline run (`whitespace-nowrap`) so it never
// breaks across lines inside narrow containers (admin sidebar, top bar…).
export function BrandName({
  className = '',
  accentClass = 'text-copper-500'
}: {
  className?: string;
  accentClass?: string;
}) {
  const words = siteConfig.companyName.split('-');

  const segments: string[] = [];
  words.forEach((word, wi) => {
    if (wi > 0) segments.push('-');
    // "TechnoSolaire" -> ["Techno", "Solaire"] on the camelCase boundary.
    for (const part of word.split(/(?=[A-Z])/)) segments.push(part);
  });

  return (
    <span className={`whitespace-nowrap ${className}`}>
      {segments.map((seg, i) =>
        seg === '-' ? (
          <Fragment key={i}>-</Fragment>
        ) : (
          <Fragment key={i}>
            <span className={accentClass}>{seg[0]}</span>
            {seg.slice(1)}
          </Fragment>
        )
      )}
    </span>
  );
}