import { useState } from 'react';
import { LayoutDashboard, CalendarDays } from 'lucide-react';
import { motion } from 'motion/react';
import HydrogenOverview from './HydrogenOverview';
import HydrogenDaily from './HydrogenDaily';

type SubTab = 'overview' | 'daily';

export default function HydrogenView() {
  const [sub, setSub] = useState<SubTab>('overview');
  return (
    <>
      <div className="bg-white px-4 py-2 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-6 sticky top-[58px] z-20">
        <button
          onClick={() => setSub('overview')}
          className={`flex items-center gap-2 py-1 transition-all relative ${sub === 'overview' ? 'text-blue-600' : 'text-slate-400'}`}
        >
          <LayoutDashboard size={14} />
          <span className="text-[11px] font-bold">总览</span>
          {sub === 'overview' && (
            <motion.div layoutId="activeHydrogenSub" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
          )}
        </button>
        <button
          onClick={() => setSub('daily')}
          className={`flex items-center gap-2 py-1 transition-all relative ${sub === 'daily' ? 'text-blue-600' : 'text-slate-400'}`}
        >
          <CalendarDays size={14} />
          <span className="text-[11px] font-bold">每日</span>
          {sub === 'daily' && (
            <motion.div layoutId="activeHydrogenSub" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
          )}
        </button>
      </div>
      {sub === 'overview' ? <HydrogenOverview /> : <HydrogenDaily />}
    </>
  );
}