import * as React from 'react';

export type TitleTypographyProps = {
  headline?: string;
  detail?: string;
  headlineCount?: number;
  detailCount?: number;
};

export function TitleTypography({
  headline = 'Interrupting and adding details',
  detail = 'in GPT-5.4 Thinking',
  headlineCount = headline.length,
  detailCount = detail.length,
}: TitleTypographyProps = {}): React.ReactElement {
  const visibleHeadline = headline.slice(0, Math.max(0, headlineCount));
  const visibleDetail = detail.slice(0, Math.max(0, detailCount));
  const thinkingIndex = detail.indexOf('Thinking');
  const detailOffsets =
    thinkingIndex < 0 ? undefined : `${'0 '.repeat(thinkingIndex)}-3 3`;

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={1920}
      height={1080}
      viewBox="0 0 1920 1080"
      role="img"
      aria-label={`${visibleHeadline} ${visibleDetail}`.trim()}
      style={{ display: 'block' }}
    >
      <rect width={1920} height={1080} fill="#ffffff" />
      <g
        fill="#000000"
        fontFamily="Geist"
        fontSize={98}
        fontWeight={650}
        textAnchor="start"
        dominantBaseline="alphabetic"
        xmlSpace="preserve"
        style={{
          fontKerning: 'normal',
          fontVariantLigatures: 'none',
          fontSynthesis: 'none',
        }}
      >
        <text x={286.5} y={516} letterSpacing={-3.6}>
          {visibleHeadline}
        </text>
        <text x={529.5} y={633} letterSpacing={-3.1} dx={detailOffsets}>
          {visibleDetail}
        </text>
      </g>
    </svg>
  );
}