"use client";

import { Program, User, UserBadge } from "@/types/models";
import { useState } from "react";
import { useTranslations } from "next-intl";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

import { AboutTab } from "./about";
import { BlogsTab } from "./blogs";
import { BadgesTab } from "./badges";
import { ProgramsTab } from "./programs";

export function StudentDetailsTabs({ user, programs, badges }: { user: User, programs: Program[], badges: UserBadge[] }) {
    const t = useTranslations();
    const [active, setActive] = useState("about");
    const tabs = [
        
        {
            trigger: t("profile.my-blogs"),
            value: "my-blogs",
            tab: <BlogsTab user={user} />
        },
        {
            trigger: t("profile.badges"),
            value: "badges",
            tab: <BadgesTab badges={badges} />
        },
        {
            trigger: t("routes.programs"),
            value: "programs",
            tab: <ProgramsTab programs={programs} />
        },
        {
            trigger: t("profile.about"),
            value: "about",
            tab: <AboutTab user={user} />
        },
    ];

    const activeTab = tabs.find(tab => tab.value === active);

    return (
        <Tabs value={active} onValueChange={setActive} className="w-full pb-10 space-y-4">
            <TabsList className="w-full bg-gray-800 rounded-3xl text-white">
                {tabs?.map((tab, i) => (
                    <TabsTrigger key={i} value={tab.value} className="rounded-3xl text-white aria-[selected=true]:bg-gradient-to-br aria-[selected=true]:from-blue-500 aria-[selected=true]:to-primary-tw-600">
                        {tab.trigger}
                    </TabsTrigger>
                ))}
            </TabsList>
            <TabsContent value={active}>
                {activeTab?.tab}
            </TabsContent>
        </Tabs>
    );
}