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

interface BlogCardProps {
  title: string;
  description: string;
  image: string;
  alt: string;
  href: string;
  chip: string;
  category: string;
  ctaText: string;
  delay?: string;
}

export default function BlogCard({
  title,
  description,
  image,
  alt,
  href,
  chip,
  category,
  ctaText,
  delay = "0s",
}: BlogCardProps) {
  return (
    <article
      className="blog-card motion-reveal"
      style={{ "--delay": delay } as React.CSSProperties}
    >
      <Link
        className="blog-image zoom-breathe"
        href={href}
        aria-label={`Read about ${title}`}
      >
        <Image
          src={image}
          alt={alt}
          loading="lazy"
          width={800}
          height={800}
          quality={86}
        />
        <span className="blog-chip">{chip}</span>
      </Link>
      <div className="blog-copy">
        <span className="blog-date">{category}</span>
        <h3>
          <Link href={href}>{title}</Link>
        </h3>
        <p>{description}</p>
        <Link className="blog-read" href={href}>
          {ctaText} →
        </Link>
      </div>
    </article>
  );
}