import { Program } from "@/types/models";
import { Link } from "@/i18n/navigation";
import { getTranslations } from "next-intl/server";

import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { GraduationCap, Star, TimerIcon } from "lucide-react";
import { URL_IMAGE } from "@/utils/url";

export async function ProgramHeader({ program }: { program: Program }) {
    const t = await getTranslations();
    const instructor = program?.coaches?.[0];
    return (
        <div className="relative z-20 text-white">
            <div className="flex items-center gap-1 mb-2">
                <Link href={'/programs'} className="hover:opacity-80">
                    {t("routes.programs")} /
                </Link>
                <p>
                    {program?.name}
                </p>
            </div>

            <h1 className="text-3xl font-semibold">
                {program.name}
            </h1>

            {/* <div className="mt-8 flex items-center gap-3 *:underline *:underline-offset-1">
                {
                    program?.course_topics?.slice(0, 2)?.map((topic, index) => (
                        <p key={index}>
                            {topic}
                        </p>
                    ))
                }
            </div> */}

            <div className="flex items-center gap-2 mt-8 flex-wrap *:!pointer-events-none">
                {instructor && (
                    <Button className="bg-gradient-to-br from-blue-700 to-primary-tw-500" size={"lg"}>
                        <Avatar className="size-6">
                            <AvatarFallback className='uppercase font-semibold text-black text-xs'>
                                {(instructor?.my_full_name || instructor?.name)?.[0]} 
                                {(instructor?.my_full_name || instructor?.name)?.split(' ').slice(-1)[0]?.[0]}
                            </AvatarFallback>
                            <AvatarImage
                                src={instructor?.avatar ? `${URL_IMAGE}/${instructor.avatar}` : (instructor?.avatar || instructor?.get_avatar || "")}
                                alt={instructor?.my_full_name || instructor?.name || "Instructor"}
                                className="rounded-full object-cover border-4 border-purple-100"
                            />
                        </Avatar>
                        <p>
                            {instructor?.my_full_name || instructor?.name}
                        </p>
                    </Button>
                )}

                <Button className="bg-white text-black" size={"lg"}>
                    <GraduationCap className="size-4 text-primary-tw-500" />
                    <span>
                         {program?.participants} {t("programs.students")}
                    </span>
                </Button>

                {/* hours */}
                <Button className="bg-white text-black" size={"lg"}>
                    <TimerIcon className="size-4 text-primary-tw-500" />
                    <span>
                        {program?.hours} {t("custom.hours")}
                    </span>
                </Button>

                {/* rate */}
                <Button className="bg-white text-black" size={"lg"}>
                    <div className="flex items-center flex-nowrap gap-1">
                        <Star className="size-4 text-[#facc15]" fill="currentColor" />
                        <Star className="size-4 text-[#facc15]" fill="currentColor" />
                        <Star className="size-4 text-[#facc15]" fill="currentColor" />
                        <Star className="size-4 text-[#facc15]" fill="currentColor" />
                        <Star className="size-4 text-[#facc15]" fill="currentColor" />
                    </div>
                    <span>
                       ( {program?.rating || 5} )
                    </span>
                </Button>
            </div>
        </div>
    )
}