// @ts-nocheck
import { Link } from "react-router"

import { convertDate } from "@/utils/convertDate"

const PostListing = ({ posts, title, showAllButton }) => {
  return (
    <div className="container mx-auto p-4 grow">
      <div className="space-my-8">
        <section className="container">
          <h2 className="text-2xl font-medium mb-4">{title}</h2>
          {posts.map((post) => (
            <ul>
              <li className="mb-4">
                <div className="flex justify-between items-center relative gap-2 hover:bg-[#504945]">
                  <span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0">
                    {convertDate(post.date)}
                  </span>
                  <Link
                    to={`/posts/${post.slug}`}
                    key={post.slug}
                    className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1"
                  >
                    {post.title}
                  </Link>
                </div>
              </li>
            </ul>
          ))}
        </section>
      </div>
    </div>
  )
}

export default PostListing
{
  /*

<Link
						to={`/posts/${post.slug}`}
						key={post.slug}
						className="block no-underline"
					>
						<Card
							key={post.slug}
							className="flex flex-col h-full hover:bg-primary/5 py-4 rounded border-none "
						>
							<CardHeader className="">
								<CardTitle className="leading-snug font-bold ">
									{post.title}
								</CardTitle>
								<CardDescription className="text-sm text-muted-foreground">
									<div className="flex justify-between gap-2">
										<span className="text-sm">{convertDate(post.date)}</span>
									</div>
								</CardDescription>
							</CardHeader>
						</Card>
					</Link>

*/
}
