import { useState } from 'react';
import { Fuel, BatteryCharging } from 'lucide-react';
import { motion } from 'motion/react';
import HydrogenView from './HydrogenView';
import ElectricView from './ElectricView';

type TopTab = 'hydrogen' | 'electric';

export default function EnergyModule() {
  const [activeTab, setActiveTab] = useState<TopTab>('hydrogen');
  return (
    <div className="min-h-screen bg-[#F8F9FB] text-gray-800 font-sans p-3 md:p-6 relative" style={{ overflowX: 'clip' }}>
      <div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 landscape:pb-0 landscape:h-full landscape:flex-1 landscape:overflow-hidden">
        <div className="bg-white px-4 py-2 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-6 sticky top-0 z-30">
          <button
            onClick={() => setActiveTab('hydrogen')}
            className={`flex items-center gap-2 py-1 transition-all relative ${activeTab === 'hydrogen' ? 'text-blue-600' : 'text-slate-400'}`}
          >
            <Fuel size={14} />
            <span className="text-[11px] font-bold">氢能</span>
            {activeTab === 'hydrogen' && (
              <motion.div layoutId="activeEnergyTopTab" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
            )}
          </button>
          <button
            onClick={() => setActiveTab('electric')}
            className={`flex items-center gap-2 py-1 transition-all relative ${activeTab === 'electric' ? 'text-blue-600' : 'text-slate-400'}`}
          >
            <BatteryCharging size={14} />
            <span className="text-[11px] font-bold">电能</span>
            {activeTab === 'electric' && (
              <motion.div layoutId="activeEnergyTopTab" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
            )}
          </button>
        </div>
        {activeTab === 'hydrogen' ? <HydrogenView /> : <ElectricView />}
      </div>
    </div>
  );
}