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

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

export default Item