tipilan/src/app/[locale]/ajakava/page.tsx

"use client";

import { useState } from "react";
import { vipnagorgialla } from "@/components/Vipnagorgialla";
import { scheduleData } from "@/data/timetable";
import SectionDivider from "@/components/SectionDivider";
import { useTranslations } from "next-intl";

const tabs = Object.keys(scheduleData);

export default function Timetable() {
  const [activeTab, setActiveTab] = useState(tabs[0]);
  const schedule = scheduleData[activeTab];
  const t = useTranslations();

  return (
    <div>
      <div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16">
        <h1
          className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-8`}
        >
          {t("schedule.title")}
        </h1>

        {/* Tab menu */}
        <div className="flex gap-4 mb-8 flex-wrap">
          {tabs.map((tab) => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={`${vipnagorgialla.className} cursor-pointer uppercase italic px-4 py-2 text-lg font-semibold ${
                activeTab === tab
                  ? "bg-[#00A3E0] text-white"
                  : "bg-[#007CAB] dark:bg-[#007CAB] text-[#EEE5E5] hover:bg-[#00A3E0] dark:hover:bg-[#007CAB]"
              } transition-colors`}
            >
              {t(`schedule.${tab}`)}
            </button>
          ))}
        </div>

        {/* Schedule entries */}
        <div className="space-y-6">
          {schedule.map((item, idx) => (
            <div
              key={idx}
              className="border-l-3 border-[#007CAB] pl-4 flex flex-col sm:flex-row flex-wrap gap-2 sm:gap-5 items-stretch"
            >
              <div
                className={`${vipnagorgialla.className} md:w-[180px] w-30 text-[#00A3E0] text-3xl md:text-4xl font-bold italic flex-shrink-0 flex items-center sm:justify-center`}
              >
                {item.time}
              </div>
              <div className="flex-1 flex flex-col justify-center min-w-0 sm:min-h-[120px]">
                <div
                  className={`${vipnagorgialla.className} text-2xl md:text-3xl italic font-bold text-[#2A2C3F] dark:text-[#EEE5E5] text-balance`}
                >
                  {t(item.titleKey)}
                </div>
                {item.description && (
                  <div className="text-xl md:text-2xl text-[#938BA1] dark:text-[#938BA1] text-balance">
                    {item.description}
                  </div>
                )}
                <div className="text-xl md:text-2xl text-[#938BA1] dark:text-[#938BA1] text-balance">
                  {t(item.locationKey)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <SectionDivider />
    </div>
  );
}