import Image from "next/image";
import Link from "next/link";
import { urlAsset } from "@/lib/utils/assets";
import type { Article } from "@/types/article";
import styles from "./ArticleCard.module.css";

export default function ArticleCard({ article }: { article: Article }) {
  const date = new Date(article.publieLe).toLocaleDateString("fr-FR", {
    day: "numeric",
    month: "long",
    year: "numeric",
  });

  return (
    <Link href={`/blog/${article.slug}`} className={styles.carte}>
      <div className={styles.imageConteneur}>
        {article.imageUrl ? (
          <Image
            src={urlAsset(article.imageUrl)}
            alt={article.titre}
            fill
            sizes="(min-width: 1024px) 380px, (min-width: 640px) 45vw, 90vw"
            className={styles.image}
          />
        ) : (
          <div className={styles.imagePlaceholder} />
        )}
      </div>
      <div className={styles.contenu}>
        <span className={styles.meta}>
          {date} · {article.auteur}
        </span>
        <h3 className={styles.titre}>{article.titre}</h3>
      </div>
    </Link>
  );
}