import Link from "@/app/components/LocaleLink";
import { Blog } from "../../lib/blogs";
import { getBlogImageUrl } from "../../lib/image-url";

interface BlogCardProps {
  blog: Blog;
}

function stripHtml(html: string | null): string {
  if (!html) return "";

  return html
    .replace(/<[^>]*>/g, " ")
    .replace(/\s+/g, " ")
    .trim();
}

function formatDate(date: string | null): string {
  if (!date) return "";

  const formatted = new Date(date);

  return formatted.toLocaleDateString("en-US", {
    month: "long",
    day: "numeric",
    year: "numeric",
  });
}

export default function BlogCard({
  blog,
}: BlogCardProps) {
  const description = stripHtml(blog.description);

  return (
    <div className="col-lg-4 col-md-6 mb-4">
      <div className="blog-card h-100">

        {/* Image */}
        <Link
          href="#"
          className="blog-card-image"
        >
          <img
            src={getBlogImageUrl(blog.blogImage)}
            alt={blog.title}
            loading="lazy"
          />

          {/* Viewer 
          <div className="blog-viewer">
            <span>◉</span>
            {blog.viewer || 0}
          </div>*/}
        </Link>

        {/* Content */}
        <div className="blog-card-body">

          <Link
            href="#"
            className="blog-title"
          >
            {blog.title}
          </Link>

          {description && (
            <p className="blog-description">
              {description.length > 120
                ? `${description.substring(0, 120)}...`
                : description}
            </p>
          )}

          <div className="blog-meta">

            <span className="blog-author">
              {blog.author || "Admin"}
            </span>

            <span className="blog-date">
              {formatDate(blog.postedOn)}
            </span>

          </div>

        </div>
      </div>
    </div>
  );
}