const ChunkingDemo = () => {
  const rawNumber = "4980156283749201"; // 架空の番号
  
  // 4桁ごとにスペースを入れるフォーマット関数
  const formatCreditCard = (num) => {
    return num.replace(/(\d{4})(?=\d)/g, '$1 ');
  };

  return (
    <div className="p-8 bg-gray-900 text-white rounded-xl shadow-2xl max-w-sm mx-auto">
      <div className="flex justify-between items-center mb-6">
        <div className="text-gray-400 text-xs uppercase tracking-widest">Card Detail</div>
        <div className="w-8 h-5 bg-yellow-500 rounded opacity-80"></div>
      </div>

      {/* Bad Example: No Chunking */}
      <div className="mb-8 opacity-50 hover:opacity-100 transition-opacity">
        <label className="block text-xs text-gray-500 mb-1">Raw Format (Hard to Read)</label>
        <div className="font-mono text-xl tracking-wider select-all">
          {rawNumber}
        </div>
        <p className="text-xs text-red-400 mt-1 hidden">
          * どこまで読んだか分からなくなりませんか？
        </p>
      </div>

      {/* Good Example: Chunking applied */}
      <div>
        <label className="block text-xs text-green-400 mb-1 font-bold">Chunked Format (Easy to Read)</label>
        <div className="font-mono text-2xl tracking-wider font-bold text-shadow select-all">
          {formatCreditCard(rawNumber)}
        </div>
        <div className="flex justify-between mt-6 text-gray-400 text-sm">
          <span>Hikaby User</span>
          <span>12/28</span>
        </div>
      </div>

    </div>
  );
};

render(<ChunkingDemo />);