import { Link } from "react-router";

export function BlogPostItem({
  title,
  idx,
  datePosted,
  summary,
}: {
  title: string;
  idx: number;
  datePosted: string;
  summary: string;
}) {
  return (
    <>
      <Link to={`/entries/${idx}`}>
        <div className="border border-gray-300 p-3.5 md:p-5 rounded-md flex flex-col gap justify-center items-center max-w-lg">
          <div className="flex flex-row gap-4 justify-center items-center">
            <p className="text-gray-500">#{idx + 1}</p>
            <h2 className="text-xl md:text-2xl dark:text-gray-300 text-gray-900 font-bold ">
              {title}
            </h2>
          </div>
          <p className="text-gray-500 text-sm">Posted on {datePosted}</p>
          <div className="h-3" />
          <p className="text-left w-full">
            {summary.length > 100 ? summary.substring(0, 100) + "..." : summary}
          </p>
        </div>
      </Link>
    </>
  );
}