"use client";
import Loading from "@/views/profile/loading";
import { useUserData } from "@/store/user-profile";
import Image from "@/ui/image";
import { ClipboardMinus, NotepadText, Pin } from "lucide-react";
import { useTranslation } from "react-i18next";

const CourseCard = () => {
    const { profile, loading, error } = useUserData();
    const { t } = useTranslation();
    if (loading) {
        return (
            <>
                <Loading />
            </>
        )
    };

    if (error) {
        return (
            <p>{error?.message}</p>
        )
    };

    if (profile?.courseRegister?.length === 0) {
        return (
            <div className="grid h-full w-full place-items-center max-lg:p-8">
                <p className="text-center text-gray-600 text-lg flex items-center gap-2">
                    {t('profile.no-courses')} <ClipboardMinus />
                </p>
            </div>
        )
    };

    return (
        <div className=" mx-auto p-4">

            {/* Course Grid */}
            <div className="grid gap-6">
                {profile?.courseRegister.map((course, index: number) => (
                    <div key={index} className="bg-gray-50 rounded-lg p-4 grid lg:grid-cols-12 gap-4 overflow-hidden">

                        <div className="col-span-10 flex gap-4 max-lg:flex-col">
                            <div className="w-44 h-28 relative max-lg:w-full max-lg:h-44">
                                <Image
                                    src={course?.course.image || "https://via.placeholder.com/150"}
                                    alt={course?.course.title}
                                    className="w-full h-full object-cover rounded-md"
                                />
                            </div>

                            {/* Course Title */}
                            <div>
                                <p className="truncate max-lg:w-full text-primary-tw font-semibold">
                                    {course?.course?.title}
                                </p>
                                <div className="flex items-center gap-2 text-sm">
                                    <Pin color='#7A7A7A' size={16} />
                                    <p>{course?.course?.subject.title}</p>
                                </div>
                                <div className="flex items-center gap-2 text-sm">
                                    <NotepadText fill="white" size={16} color="#7A7A7A" />
                                    <p className="mt-1">{course?.created_at}</p>
                                </div>
                            </div>

                        </div>

                        <div className="col-span-2">
                            <p className="bg-primary-tw text-white px-4 rounded-md text-nowrap">
                                {course?.price} {course?.currency}
                            </p>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default CourseCard;