import { LayoutDashboard, CalendarDays } from 'lucide-react';
import ElectricView, { type ElectricSubTab } from './ElectricView';
import SubTabs from './SubTabs';
import { useHashSubTab } from './useHashSubTab';

const SUB_TABS = [
  { id: 'daily',    label: '每日', icon: CalendarDays },
  { id: 'overview', label: '总览', icon: LayoutDashboard },
] as const satisfies readonly { id: ElectricSubTab; label: string; icon: typeof CalendarDays }[];

const SUB_IDS: readonly ElectricSubTab[] = ['daily', 'overview'];

export default function ElectricModule() {
  const [sub, setSub] = useHashSubTab<ElectricSubTab>('electric', SUB_IDS);
  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 max-md:landscape:pb-0 max-md:landscape:h-full max-md:landscape:flex-1 max-md:landscape:overflow-hidden">
        <SubTabs tabs={SUB_TABS} active={sub} onChange={setSub} />
        <ElectricView sub={sub} />
      </div>
    </div>
  );
}