import Link from "next/link";
import Image from "next/image";
import type { BlogPost } from "@/data/blog-posts";
import { BlogSmiley } from "./BlogSmiley";

interface BlogCardProps {
  post: BlogPost;
}

export function BlogCard({ post }: BlogCardProps) {
  return (
    <Link
      href={`/blog/${post.slug}`}
      className="b-card"
    >
      <div className="b-card-img">
        <Image
          src={post.image}
          alt={post.title}
          fill
          sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
          style={{ objectFit: "cover" }}
        />
        <span
          className="b-tag"
          style={{
            position: "absolute", top: 14, left: 14,
            background: "rgba(244,239,225,.92)",
            backdropFilter: "blur(3px)",
            borderColor: "transparent",
          }}
        >
          {post.cat}
        </span>
      </div>

      <div className="b-card-body">
        <h3 className="b-card-title">{post.title}</h3>
        <p className="b-card-excerpt">{post.excerpt}</p>
        <div style={{ flex: 1 }} />
        <div className="b-card-footer">
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <BlogSmiley size={28} />
            <span style={{ fontSize: 13, fontWeight: 600, color: "var(--b-ink)" }}>
              The DesignShare Team
            </span>
          </div>
          <span className="b-meta" style={{ fontSize: 13 }}>{post.read} read</span>
        </div>
      </div>
    </Link>
  );
}