import { useState } from "react";
import { Tabs, TabsList, tabsStyle, TabsTrigger } from "~/components/ui/tabs";
import BottomNavigation from "~/components/bottom-nav";
import { CalendarCheck, ChefHat } from "lucide-react";
import WIP from "./wip";
import Menus from "./menus";

const tabs = [
  {
    value: "menu",
    label: "Menus",
    icon: <ChefHat className="h-4 w-4" />,
    content: <Menus />,
  },
  {
    value: "bjrepas",
    label: "BJ Repas",
    icon: <CalendarCheck className="h-4 w-4" />,
    content: <WIP />,
  },
];

export default function RepasPage() {
  // user / notifications / preferences tabs
  const [activeTab, setActiveTab] = useState(tabs[0].value);

  return (
    <div className="space-y-6 pb-20 md:pb-0">
      {/* Tabs */}
      <Tabs
        defaultValue={tabs[0].value}
        value={activeTab}
        onValueChange={setActiveTab}
        className="max-w-md w-full"
      >
        <TabsList className="w-full p-0 bg-background justify-start border-b rounded-none">
          {tabs.map((tab) => (
            <TabsTrigger
              key={tab.value}
              value={tab.value}
              className={tabsStyle}
            >
              {tab.icon}
              {tab.label}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>

      {/* Tab Content */}
      <div className="pt-2">
        {tabs.map((tab) => (
          <div
            key={tab.value}
            className={`${
              activeTab === tab.value ? "block" : "hidden"
            } transition-all duration-300`}
          >
            {tab.content}
          </div>
        ))}
      </div>

      <BottomNavigation activeId="repas" />
    </div>
  );
}