import TextLoading from "@/app/component/loading/Text"
import WarnP from "@/components/icons/WarnP"

function Activities({ data, loading }) {
    return (
        <div className="w-full mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px]">
            <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">فعالیت های امروز</p>
            <ul className="flex flex-col justify-start w-full mt-[24px]">
                {data.todays_activities.map((item, idx) => (
                    <li
                        key={idx}
                        className="flex flex-col"
                    >
                        <div className="flex items-center justify-between">
                            <div className="flex items-center justify-start gap-[12px]">
                                <div className="bg-[rgba(255,192,81,0.20)] p-[8px] rounded-full">
                                    <WarnP />
                                </div>
                                <TextLoading width={110} height={18} loading={loading}>
                                    <p className="text-[#616161] text-[16px] font-medium">{item.text}</p>
                                </TextLoading>
                            </div>
                            <TextLoading width={55} height={18} loading={loading}>
                                <p className="text-[#7E7E7E] text-[12px] font-normal">{item.time}</p>
                            </TextLoading>
                        </div>
                        {data.todays_activities.length > idx + 1 && (
                            <span className="block h-px w-full bg-transparent md:bg-[#EFEFEF] px-[13px] my-[16px] md:my-[20px] lg:my-[24px]"></span>
                        )}
                    </li>
                ))}
            </ul>
        </div>
    )
}

export default Activities