import { Program } from "@/types/models";

import { useGet } from "@/hooks/use-get"
import { useTranslations } from "next-intl";

import { ProgramBox } from "../../programs/(all)/_components/program-box";

export function ProgramsTab({ programs }: { programs: Program[] }) {
    const t = useTranslations();

    return (
        <div className="rounded-md p-4 border space-y-4 text-start" dir="rtl">
            <h2 className="text-2xl text-gray-700">
                {t("routes.programs")}
            </h2>
            <div className="grid md:grid-cols-3 gap-4">
                {
                    programs?.length
                        ?
                        programs?.map((program: Program, index: number) => (
                            <ProgramBox program={program} key={index} />
                        ))
                        :
                        <div className="grid place-items-center min-h-[50dvh] md:col-span-3">
                            {t('custom.no results')}
                        </div>
                }
            </div>
        </div>
    )
}