import { T } from 'gt-next';

// 変更前
function Greeting() {
  return <p>Hello, world!</p>;
}

// 変更後
function Greeting() {
  return <T><p>Hello, world!</p></T>;
}

// シンプルなテキスト
<T>私たちのアプリへようこそ</T>

// HTML要素
<T><h1>ページタイトル</h1></T>

// 複雑なネストしたJSX
<T>
  <div className="alert">
    <span>重要:</span> 注意深くお読みください。
  </div>
</T>

<T context="notification popup, not bread">
  トーストをクリックして閉じる
</T>

<T id="welcome-message">
  おかえりなさい、ユーザー！
</T>

// ✅ 静的コンテンツは動作します
<T><button>ここをクリック</button></T>
<T><h1>私たちのサイトへようこそ</h1></T>

// ❌ 動的コンテンツは動作しません
<T><p>こんにちは {username}</p></T>
<T><p>今日は {new Date()}</p></T>

// ✅ 動的コンテンツにはVariableコンポーネントを使用してください
<T>
  <p>こんにちは <Var>{username}</Var></p>
</T>

// 基本的なテキスト
<T>こんにちは、世界！</T>

// テキスト付きボタン
<T><Button>フォームを送信</Button></T>

// スタイル付きヘッディング
<T><h1 className="text-2xl font-bold">ようこそ</h1></T>

// ナビゲーションメニュー
<T>
  <nav className="navbar">
    <a href="/about">私たちについて</a>
    <a href="/contact">お問い合わせ</a>
  </nav>
</T>

// アラートメッセージ
<T>
  <div className="alert alert-warning">
    <AlertIcon className="w-5 h-5" />
    <span>セッションの有効期限まで5分です</span>
  </div>
</T>

// 静的テキストと動的な値の組み合わせ
<T>
  <p>おかえりなさい、<Var>{user.name}</Var>さん！</p>
</T>

// 混合コンテンツを含むフォーム
<T>
  <label>
    メール: <input type="email" placeholder="メールアドレスを入力してください" />
  </label>
</T>

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

// 安全 - 機密データはローカルに保持されます
<T>
  おかえりなさい、<Var>{username}</Var>さん
</T>

// ❌ 間違い - コンポーネント内のコンテンツは翻訳されません
function MyComponent() {
  return <p>これは翻訳されません</p>;
}

<T>
  <h1>これは翻訳されます</h1>
  <MyComponent /> {/* 内部のコンテンツは翻訳されません */}
</T>

// ✅ 正しい - 各コンポーネントを個別にラップします
function MyComponent() {
  return <T><p>これは翻訳されます</p></T>;
}

<T><h1>これは翻訳されます</h1></T>
<MyComponent />

// ❌ <T> コンポーネントをネストしないでください
<T>
  <T>Hello world</T> {/* これはしないでください */}
</T>

// ❌ 間違い - 動的コンテンツが壊れる
<T><p>Hello {username}</p></T>

// ✅ 正しい - Variableコンポーネントを使用
<T><p>Hello <Var>{username}</Var></p></T>