import AnimationTextHead from "@/app/component/AnimationTextHead";
import UnderlineLG from "@/components/icons/UnderlineLG";
import React from "react";
import Item from "./Item";

// عرض ستون ثابت است: با lg:w-fit عرض را بلندترین عنوان تعیین می‌کرد و با هر
// مقاله جابه‌جا می‌شد.
function RelatedContent({ data, loading }) {
  return (
    <div className="p-[12px] w-full lg:w-[320px] lg:shrink-0 md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]">
      <AnimationTextHead text="مطالب مرتبط">
        <UnderlineLG />
      </AnimationTextHead>
      <ul className="flex w-full flex-col justify-start items-start">
        {data &&
          data.length > 0 &&
          data?.map((item, idx) => (
            <Item idx={idx} data={item} key={item.uuid} loading={loading} />
          ))}
      </ul>
    </div>
  );
}

export default RelatedContent;