import Image from "next/image";
import Link from "next/link";

function Item({ data, idx }) {
    return (
        <li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
            <Link href={`/blog/${data.id}`}>
                <Image
                    className="
                        min-w-[64px] sm:min-w-[73px] md:min-w-[85px] lg:min-w-[97px] 
                        min-h-[56px] sm:min-h-[64px] md:min-h-[75px] lg:min-h-[88px] 
                        rounded-[8px] overflow-hidden object-cover
                    "
                    src={data.src}
                    alt="article"
                    height={88}
                    width={97}
                />
            </Link>
            <div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
                <Link href={`/blog/${data.id}`}>
                    <p
                        className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap"
                    >{data.title}</p>
                </Link>
                <p
                    className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
                >تاریخ انتشار: {data.date_of_release}</p>
            </div>
            {data.id > idx + 1 && (
                <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
            )}
        </li>
    )
}

export default Item