import { useEffect } from 'react';
import { loadTikTokFont } from '@getbluma/tiktok-text';

export const App: React.FC = () => {
  useEffect(() => {
    loadTikTokFont('/fonts/TikTokSans-Variable.ttf');
  }, []);

  return <TikTokText>Hello World</TikTokText>;
};

import { TikTokText } from '@getbluma/tiktok-text';

<TikTokText>Hello World</TikTokText>
<TikTokText size="xl" weight={550}>Big Text</TikTokText>
<TikTokText theme="cyan">Cyan themed text</TikTokText>

import { TikTokTextOutline } from '@getbluma/tiktok-text';

// Using theme (recommended)
<TikTokTextOutline theme="cyan">Cyan Theme</TikTokTextOutline>
<TikTokTextOutline theme="paleYellow">Pale Yellow Theme</TikTokTextOutline>
<TikTokTextOutline theme="peach">Peach Theme</TikTokTextOutline>

// Custom colors
<TikTokTextOutline color="#FFFF00" outlineColor="#FF0000">
  Yellow with Red Outline
</TikTokTextOutline>

// With gradient fill
<TikTokTextOutline
  gradient={{
    type: 'linear',
    angle: 90,
    stops: [
      { offset: '0%', color: '#FF0000' },
      { offset: '100%', color: '#FFFF00' }
    ]
  }}
>
  Gradient Text
</TikTokTextOutline>

import { TikTokTextBlock } from '@getbluma/tiktok-text';

// Using theme (recommended)
<TikTokTextBlock theme="purple">Hello World</TikTokTextBlock>
<TikTokTextBlock theme="paleYellow" size="m" weight={450}>
  {"- from someone who got into stanford,\n yale, & other t20's! ('29)"}
</TikTokTextBlock>
<TikTokTextBlock theme="peach" weight={550}>
  {"you are killing\nme inside"}
</TikTokTextBlock>

// Step indicator style (white bg, black text)
<TikTokTextBlock theme="white">
  1. first step title
</TikTokTextBlock>

// Multi-line text with gooey wrap effect
<TikTokTextBlock theme="lavender" size="l" weight={550}>
  {"lavender theme\nwith two lines"}
</TikTokTextBlock>

// Using custom hex colors (overrides theme)
<TikTokTextBlock backgroundColor="#FF69B4" color="#FFFFFF">
  Custom Pink
</TikTokTextBlock>

// With maxWidth for auto word-wrapping
<TikTokTextBlock theme="purple" maxWidth={500}>
  This text will automatically wrap when it exceeds 500px width
</TikTokTextBlock>

// With custom font
<TikTokTextBlock theme="cyan" fontFamily="Arial, sans-serif">
  Custom Font Text
</TikTokTextBlock>

shadow={{
  offsetX: 4,
  offsetY: 4,
  blur: 8,
  color: 'rgba(0,0,0,0.5)'
}}

gradient={{
  type: 'linear', // or 'radial'
  angle: 90,      // for linear gradients
  stops: [
    { offset: '0%', color: '#FF0000' },
    { offset: '100%', color: '#FFFF00' }
  ]
}}

import { loadTikTokFont, isTikTokFontLoaded } from '@getbluma/tiktok-text';

// Load the font
await loadTikTokFont('/path/to/TikTokSans-Variable.ttf');

// Check if loaded
if (isTikTokFontLoaded()) {
  console.log('Font ready!');
}

import { wrapText } from '@getbluma/tiktok-text';

const lines = wrapText('Long text that needs wrapping', 20);
// Returns: ['Long text that needs', 'wrapping']

// Components
export { TikTokText, TikTokTextOutline, TikTokTextBlock } from '@getbluma/tiktok-text';

// Font utilities
export { loadTikTokFont, isTikTokFontLoaded, TIKTOK_SANS } from '@getbluma/tiktok-text';

// Helper functions
export { wrapText } from '@getbluma/tiktok-text';

// Types
export type {
  TikTokTextProps,
  TikTokTextOutlineProps,
  TikTokTextBlockProps,
  ColorPreset,
  TextSize,
  FontWeight,
  TextAlign,
  TextDecoration,
  TextTransform,
  TextShadow,
  TextGradient,
  GradientStop,
} from '@getbluma/tiktok-text';