const SystemTab = ({
  saveCode,
  loadCode,
  setLoadCode,
  generateSaveData,
  loadSaveData,
  resetGame
}) => {
  return (
    <div className="p-10 lg:p-16 max-w-2xl mx-auto space-y-12 animate-fade-in">
      <section className="bg-gray-800 border border-gray-700 rounded-2xl p-8 shadow-2xl relative overflow-hidden group">
        <div className="absolute top-0 left-0 w-1 h-full bg-blue-500 opacity-50"></div>
        <h3 className="text-xl font-black mb-6 text-blue-400 flex items-center gap-3 tracking-widest uppercase">
          <Save size={24} /> Export Save
        </h3>
        <p className="text-sm text-gray-400 mb-6 font-bold opacity-80 leading-relaxed">
          現在の進行状況をバックアップコードとして生成します。別のブラウザや端末で再開する際に利用してください。
        </p>
        <div className="space-y-4">
          <button 
            onClick={generateSaveData}
            className="w-full bg-blue-600 hover:bg-blue-500 text-white font-black py-4 rounded-xl transition-all shadow-lg shadow-blue-900/50 flex items-center justify-center gap-2 uppercase tracking-widest text-sm"
          >
            コードを生成する
          </button>
          {saveCode && (
            <div className="animate-fade-in-up">
              <label className="text-[10px] font-black text-blue-500 uppercase tracking-widest mb-2 block">Your Save Code</label>
              <textarea 
                readOnly 
                value={saveCode}
                className="w-full bg-black/50 border border-blue-900/50 p-4 rounded-xl text-xs font-mono text-blue-200 h-32 focus:outline-none focus:border-blue-500 transition-colors"
                onClick={(e) => e.target.select()}
              />
              <p className="text-[10px] text-gray-500 mt-2 font-bold italic">※クリックして全選択・コピーしてください</p>
            </div>
          )}
        </div>
      </section>

      <section className="bg-gray-800 border border-gray-700 rounded-2xl p-8 shadow-2xl relative overflow-hidden group">
        <div className="absolute top-0 left-0 w-1 h-full bg-emerald-500 opacity-50"></div>
        <h3 className="text-xl font-black mb-6 text-emerald-400 flex items-center gap-3 tracking-widest uppercase">
          <Database size={24} /> Import Save
        </h3>
        <p className="text-sm text-gray-400 mb-6 font-bold opacity-80 leading-relaxed">
          以前に生成したセーブコードを貼り付けて、データを復元します。
        </p>
        <div className="space-y-4">
          <textarea 
            value={loadCode}
            onChange={(e) => setLoadCode(e.target.value)}
            placeholder="ここにコードを貼り付けてください..."
            className="w-full bg-black/50 border border-gray-700 p-4 rounded-xl text-xs font-mono text-emerald-200 h-32 focus:outline-none focus:border-emerald-500 transition-colors placeholder:text-gray-700"
          />
          <button 
            onClick={loadSaveData}
            disabled={!loadCode}
            className={`w-full font-black py-4 rounded-xl transition-all shadow-lg uppercase tracking-widest text-sm ${loadCode ? 'bg-emerald-600 hover:bg-emerald-500 text-white shadow-emerald-900/50' : 'bg-gray-700 text-gray-500 cursor-not-allowed border border-gray-600'}`}
          >
            データを読み込む
          </button>
        </div>
      </section>

      <section className="bg-red-900/10 border border-red-900/30 rounded-2xl p-8 mt-12">
        <h3 className="text-sm font-black text-red-500 mb-4 tracking-widest uppercase flex items-center gap-2">
          <Trash2 size={16} /> Danger Zone
        </h3>
        <button 
          onClick={resetGame}
          className="w-full bg-transparent border-2 border-red-900/50 hover:bg-red-900/20 text-red-500 font-black py-3 rounded-xl transition-all text-xs tracking-widest uppercase shadow-lg shadow-red-900/10"
        >
          Reset All Data
          <span className="block text-[10px] font-normal opacity-60 mt-1 lowercase">Delete local save and restart</span>
        </button>
      </section>
    </div>
  );
};