"use client";
import { useTranslation } from "react-i18next";
import { Calendar, ClipboardMinus, Package } from "lucide-react";
import { useUserData } from "@/store/user-profile";

const ServiceList = () => {
    const { profile, loading, error } = useUserData();
    const { t } = useTranslation();

    if (loading) return (
        <div className="w-full grid gap-2">
            {
                [...Array(5)].map((_, i) => (
                    <div key={i} className="flex gap-4 items-center bg-gray-100 p-2 rounded-md">
                        <div className="size-16 rounded-full l-load-dt"></div>
                        <div>
                            <div className="w-40 h-3 rounded-full l-load-dt"></div>
                            <div className="w-32 h-3 my-1 rounded-full l-load-dt"></div>
                        </div>
                    </div>
                ))
            }
        </div>
    );

    if (error) return (
        <div className="grid h-full w-full place-items-center max-lg:p-8">
            <p className="text-lg text-red-500">{error?.message || t('custom.err')}</p>
        </div>
    );

    if (profile?.serviceRegister?.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-services')} <ClipboardMinus />
                </p>
            </div>
        )
    }
    return (
        <div>
            {profile.serviceRegister && profile.serviceRegister.length > 0 && (
                profile.serviceRegister.map((item, index: number) => (
                    <div key={index} className="flex items-center justify-between bg-gray-100 rounded-xl p-4 px-6 mb-4">
                        <div className="flex items-center justify-start gap-4 w-full md:w-5/12">
                            <div className="flex items-center justify-center bg-white rounded-full w-[70px] h-[70px]">
                                <Package size={28} />
                            </div>
                            <div>
                                <div className="text-lg font-medium text-red-900 text-start capitalize">
                                    {item.service.title}
                                </div>
                                <div className=" text-gray-500 mt-2 flex gap-1 items-center font-sans">
                                    <Calendar fill="white" color="gray" size={18} />
                                    <span>{item.created_at}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                ))
            )}
        </div>
    );
};

export default ServiceList;