"use client";

import { useState } from "react";
import Link from "next/link";
import { type BlogPost, imageSrc, imageDescription } from "@/data/content";
import "../styles/blog.css";

type Props = {
  post: BlogPost;
  visible: boolean;
};

/** One blog post: the card in the blog list. Unlike ProjectCard, clicking
 *  navigates to the post instead of expanding in place. */
export default function BlogPostCard({ post, visible }: Props) {
  const [hovered, setHovered] = useState(false);

  function postTagsComponent() {
    return (
      <div
        style={{
          display: "flex",
          gap: 8,
          flexWrap: "wrap",
          marginBottom: 12,
        }}
      >
        {post.tags.map((tag) => (
          <span
            key={tag}
            style={{
              fontFamily: "var(--mono)",
              fontSize: 11,
              fontWeight: 500,
              color: "var(--accent)",
              padding: "3px 10px",
              background: "var(--accent-bg)",
              borderRadius: 4,
              letterSpacing: "0.02em",
            }}
          >
            {tag}
          </span>
        ))}
      </div>
    );
  }

  function coverImageComponent() {
    if (!post.images || post.images.length === 0) return null;
    const image = post.images![0];
    return (
      <img
        src={`/${imageSrc(image)}`}
        alt={imageDescription(image) ?? `${post.title} cover image`}
        width={800}
        height={180}
        style={{
          width: "100%",
          borderRadius: 4,
          marginBottom: 16,
          objectFit: "cover",
          height: 180,
        }}
      />
    );
  }

  return (
    <Link
      href={`/blog/${post.slug}`}
      className="blog-post-card"
      title={`Read: ${post.title}`}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: "block",
        width: "100%",
        textDecoration: "none",
        padding: 28,
        overflow: "hidden",
        background: hovered ? "var(--surface-hover)" : "var(--surface)",
        border: `1px solid ${hovered ? "var(--accent)" : "var(--border)"}`,
        borderRadius: 8,
        transition: "all 0.35s cubic-bezier(0.16, 1, 0.3, 1)",
        transform: visible
          ? hovered
            ? "translateY(-3px)"
            : "translateY(0)"
          : "translateY(12px)",
        opacity: visible ? 1 : 0,
        boxShadow: hovered ? "0 8px 32px rgba(0,0,0,0.12)" : "none",
        pointerEvents: "auto",
        cursor: "pointer",
      }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-start",
          gap: 12,
          marginBottom: 12,
        }}
      >
        <div
          style={{
            fontFamily: "var(--mono)",
            fontSize: 18,
            fontWeight: 700,
            color: hovered ? "var(--accent)" : "var(--fg)",
            transition: "color 0.2s",
            minWidth: 0,
          }}
        >
          {post.title}
        </div>
        <div
          style={{
            fontFamily: "var(--mono)",
            fontSize: 11,
            color: "var(--muted)",
            padding: "2px 8px",
            background: "var(--bg)",
            borderRadius: 4,
            border: "1px solid var(--border)",
            whiteSpace: "nowrap",
            flexShrink: 0,
          }}
        >
          {post.date}
        </div>
      </div>
      {postTagsComponent()}
      <p
        style={{
          fontFamily: "var(--sans)",
          fontSize: 14,
          lineHeight: 1.6,
          color: "var(--fg-secondary)",
          margin: "0 0 16px 0",
        }}
      >
        {post.description}
      </p>
      {post.images && post.images.length > 0 && coverImageComponent()}
    </Link>
  );
}