# Google Fonts Integration - Thai Fonts

Easy selection of beautiful Thai fonts from Google Fonts for karaoke lyrics!

## 🎯 Available Fonts

Choose from 5 popular Thai fonts:

1. **Kanit** - Modern, geometric, clean
2. **Prompt** - Friendly, rounded, approachable
3. **Anuphan** - Contemporary, elegant
4. **Chakra Petch** - Futuristic, tech-inspired
5. **Sarabun** - Professional, readable

## 📦 Configuration

### Via Environment Variables

```env
# Choose your default font
KAR_PLAYER_DEFAULT_FONT=Kanit

# Auto-load font on initialization (recommended)
KAR_PLAYER_FONT_AUTO_LOAD=true
```

**Next.js:**
```env
NEXT_PUBLIC_KAR_PLAYER_DEFAULT_FONT=Kanit
NEXT_PUBLIC_KAR_PLAYER_FONT_AUTO_LOAD=true
```

## 🚀 Usage

### Automatic (Recommended)

**1. Set environment variable:**
```env
NEXT_PUBLIC_KAR_PLAYER_DEFAULT_FONT=Kanit
NEXT_PUBLIC_KAR_PLAYER_FONT_AUTO_LOAD=true
```

**2. Initialize in your app:**
```typescript
import { autoLoadFontFromEnv } from '@karaplay/kar-player';

// Auto-load font on app start
useEffect(() => {
  autoLoadFontFromEnv();
}, []);
```

**3. Use in your component:**
```typescript
import { useLyricRenderer, getDefaultFont } from '@karaplay/kar-player';

const MyPlayer = () => {
  const defaultFont = getDefaultFont(); // 'Kanit'
  
  const { containerRef } = useLyricRenderer(lyrics, currentTime, {
    theme: {
      name: 'custom',
      fonts: {
        family: `"${defaultFont}", sans-serif`, // "Kanit", sans-serif
        // ...
      }
    }
  });
  
  return <div ref={containerRef} />;
};
```

### Manual Loading

**Load specific font:**
```typescript
import { loadGoogleFont, getFontFamily } from '@karaplay/kar-player';

// Load Kanit font
loadGoogleFont('Kanit');

// Get font family string
const fontFamily = getFontFamily('Kanit');
// → "Kanit", sans-serif
```

**Check available fonts:**
```typescript
import { getAvailableThaifonts, isValidThaiFont } from '@karaplay/kar-player';

// Get all available fonts
const fonts = getAvailableThaifonts();
// → ['Kanit', 'Prompt', 'Anuphan', 'Chakra Petch', 'Sarabun']

// Check if font is valid
if (isValidThaiFont('Kanit')) {
  console.log('Valid font!');
}
```

## 🎨 Font Showcase

### Kanit
```
เนื้อเพลงภาษาไทย
Modern, geometric, clean
Best for: Contemporary songs
```

### Prompt
```
เนื้อเพลงภาษาไทย
Friendly, rounded, approachable
Best for: Pop songs
```

### Anuphan
```
เนื้อเพลงภาษาไทย
Contemporary, elegant
Best for: Ballads
```

### Chakra Petch
```
เนื้อเพลงภาษาไทย
Futuristic, tech-inspired
Best for: Electronic music
```

### Sarabun
```
เนื้อเพลงภาษาไทย
Professional, readable
Best for: All genres
```

## 🎯 Complete Example

### Next.js App

**1. Environment (.env.local):**
```env
NEXT_PUBLIC_KAR_PLAYER_DEFAULT_FONT=Kanit
NEXT_PUBLIC_KAR_PLAYER_FONT_AUTO_LOAD=true
```

**2. Component:**
```typescript
'use client';

import { useEffect } from 'react';
import { 
  useLyricRenderer,
  autoLoadFontFromEnv,
  getDefaultFont,
  getFontFamily
} from '@karaplay/kar-player';

export default function KaraokePlayer() {
  // Auto-load font on mount
  useEffect(() => {
    autoLoadFontFromEnv();
  }, []);

  const defaultFont = getDefaultFont(); // 'Kanit'
  const fontFamily = getFontFamily(defaultFont as any);

  const { containerRef } = useLyricRenderer(lyrics, currentTime, {
    theme: {
      name: 'custom',
      fonts: {
        family: fontFamily,
        size: {
          current: '3rem',
          prev: '2rem',
          next: '2rem'
        },
        weight: {
          current: 700,
          prev: 400,
          next: 400
        }
      },
      colors: {
        inactive: '#ffffff',
        active: '#ffd700',
        current: '#ffffff',
        prev: '#999999',
        next: '#999999'
      }
    }
  });

  return (
    <div className="karaoke-container">
      <div ref={containerRef} />
    </div>
  );
}
```

## 📊 Font Comparison

| Font | Style | Weight | Best For |
|------|-------|--------|----------|
| **Kanit** | Modern | 300-700 | Contemporary |
| **Prompt** | Friendly | 300-700 | Pop |
| **Anuphan** | Elegant | 300-700 | Ballads |
| **Chakra Petch** | Futuristic | 300-700 | Electronic |
| **Sarabun** | Professional | 300-700 | All genres |

## 🔧 Advanced Usage

### Dynamic Font Switching

```typescript
import { loadGoogleFont, getFontFamily } from '@karaplay/kar-player';

const switchFont = (fontName: 'Kanit' | 'Prompt' | 'Anuphan' | 'Chakra Petch' | 'Sarabun') => {
  // Load new font
  loadGoogleFont(fontName);
  
  // Get font family
  const fontFamily = getFontFamily(fontName);
  
  // Update theme
  setTheme({
    ...theme,
    fonts: {
      ...theme.fonts,
      family: fontFamily
    }
  });
};

// Example: Switch to Prompt
switchFont('Prompt');
```

### Font Selector Component

```typescript
import { getAvailableThaifonts, loadGoogleFont } from '@karaplay/kar-player';

const FontSelector = ({ onSelect }) => {
  const fonts = getAvailableThaifonts();
  
  return (
    <select onChange={(e) => {
      const font = e.target.value;
      loadGoogleFont(font as any);
      onSelect(font);
    }}>
      {fonts.map(font => (
        <option key={font} value={font}>
          {font}
        </option>
      ))}
    </select>
  );
};
```

### Check if Font is Loaded

```typescript
import { loadGoogleFont } from '@karaplay/kar-player';

// Load font
loadGoogleFont('Kanit');

// Check if loaded (waits for font to load)
document.fonts.ready.then(() => {
  console.log('Kanit font loaded!');
});
```

## 🎯 Environment Variables

| Variable | Values | Default | Description |
|----------|--------|---------|-------------|
| `DEFAULT_FONT` | `Kanit`, `Prompt`, `Anuphan`, `Chakra Petch`, `Sarabun` | `null` | Default Thai font |
| `FONT_AUTO_LOAD` | `true`, `false` | `false` | Auto-load font on init |

## ✨ Benefits

✅ **Beautiful Thai fonts** - 5 professional Google Fonts  
✅ **Easy configuration** - Just set `.env` variable  
✅ **Auto-loading** - Loads automatically on init  
✅ **No manual setup** - Fonts loaded from Google CDN  
✅ **Optimized** - Only loads selected font  
✅ **Type-safe** - Full TypeScript support  

## 📱 Performance

**Font Loading:**
- First load: ~50-100ms
- Cached: Instant
- Size: ~20-30KB per font
- CDN: Google Fonts (fast worldwide)

## 🎉 Summary

**Enable Thai fonts in 3 steps:**

1. **Set `.env`** - Choose font: `NEXT_PUBLIC_KAR_PLAYER_DEFAULT_FONT=Kanit`
2. **Auto-load** - Call `autoLoadFontFromEnv()` on app start
3. **Use** - Font applies automatically to lyrics!

**That's it!** Beautiful Thai fonts for your karaoke app! 🎤✨