import Image from "next/image";
import Link from "next/link";
import { formatDate } from "@/lib/utils";

type ContentCardProps = {
  title: string;
  href: string;
  excerpt: string;
  category?: string | null;
  date?: Date | string | null;
  image?: string | null;
};

export function ContentCard({ title, href, excerpt, category, date, image }: ContentCardProps) {
  return (
    <article className="glass-panel lift-card content-card">
      {image ? (
        <Link className="content-card-media" href={href}>
          <Image alt={title} fill sizes="(max-width: 700px) 100vw, 33vw" src={image} unoptimized />
        </Link>
      ) : null}
      {category ? <span className="pill">{category}</span> : null}
      <h3>
        <Link href={href}>{title}</Link>
      </h3>
      <p className="muted" style={{ lineHeight: 1.7 }}>{excerpt}</p>
      <div className="content-card-meta">
        <span>{formatDate(date)}</span>
        <Link href={href}>Open</Link>
      </div>
    </article>
  );
}