import React from "react";
import { BlogCardProps } from "./types";
import * as _NextLink from "next/link";

import { Text } from "@shared/components/text";

// CJS/ESM interop: next/link uses standard __esModule exports so this is safe.
// next/image is intentionally avoided — its image-external.js uses the
// `0 && (module.exports = {...})` tree-shaking hint which confuses webpack's
// CJS→ESM interop and causes "got: object" errors in consuming apps.
const Link = ((_NextLink as any).default ??
  _NextLink) as typeof import("next/link").default;

export const BlogCard: React.FC<BlogCardProps> = ({
  href,
  title,
  description,
  date,
  category,
  image,
  imageComponent: ImageComponent,
  asGrid = true,
  index,
}: BlogCardProps) => {
  const parentClassName = asGrid
    ? "group relative flex h-full flex-col overflow-hidden rounded-card-lg bg-white shadow-drop transition-all duration-200 hover:-translate-y-0.5 hover:shadow-cardDrop"
    : `callout-card group relative w-full flex h-full flex-col overflow-hidden`;

  return (
    <article
      className={parentClassName}
      data-section-type={"blog-card"}
      data-section-index={index}
      data-view-mode={asGrid ? "grid" : "list"}
    >
      {/* Image (hidden in list view) */}
      {asGrid && (
        <div className="block h-[232px] w-full flex-shrink-0 overflow-hidden bg-gray-100">
          {image ? (
            ImageComponent ? (
              <ImageComponent
                src={image.src}
                alt={image.alt}
                width={image.width}
                height={image.height}
                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
              />
            ) : (
              <img
                src={image.src}
                alt={image.alt}
                width={image.width}
                height={image.height}
                loading="lazy"
                decoding="async"
                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
              />
            )
          ) : (
            <div
              className="h-full w-full bg-gradient-to-br from-gray-200 to-gray-100"
              aria-hidden="true"
            />
          )}
        </div>
      )}

      {/* Body */}
      <div
        className={`flex flex-1 flex-col ${
          asGrid ? "gap-5 p-6 md:p-8" : "gap-1 border-b p-3 md:p-4"
        }`}
      >
        {/* Meta: category + date */}
        <div className="flex items-center gap-2 text-[13px]">
          {asGrid && <span className="body2 text-text-brand">{category}</span>}
          {date && (
            <>
              {asGrid && (
                <span className="footnote text-text" aria-hidden="true">
                  •
                </span>
              )}
              <time className="body2 text-text">{date}</time>
            </>
          )}
        </div>

        {/* Title */}
        {title && (
          <Text as="h2" className="heading6">
            <Link
              href={href}
              className="m-0 line-clamp-3 font-black transition-colors duration-150 after:absolute after:inset-0 after:z-10 after:content-[''] hover:text-text-brand group-hover:text-text-brand"
            >
              {title}
            </Link>
          </Text>
        )}

        {/* Excerpt */}
        {description && (
          <Text className="body1 m-0 line-clamp-3 flex-1 text-text">
            {description}
          </Text>
        )}
      </div>

      {/* Fallback stretched link keeps the card navigable when no title link is rendered */}
      {!title && (
        <Link href={href} className="absolute inset-0 z-10">
          <span className="sr-only">{category ?? "Read more"}</span>
        </Link>
      )}
    </article>
  );
};
export default BlogCard;