Shared/ArticleListCard

import type { ComponentChildren } from 'preact';
import CategoryBadge from '@/src/components/shared/category-badge';
import type { CuratedTag } from '@/src/lib/home/curated-tags';
import type { Locale } from '@/lib/i18n/types';

type HeadingLevel = 'h2' | 'h3';
type Align = 'stretch' | 'start' | 'center';
type Size = 'default' | 'lead';

export interface ArticleListCardProps {
  href: string;
  ariaLabel?: string;
  /** Pre-rendered square thumbnail. Caller-specific (ItemVisual / ResponsiveImage / <picture>). */
  thumb: ComponentChildren;
  /** Optional curated-tag → a colored CategoryBadge above the title. */
  curatedTag?: CuratedTag;
  locale?: Locale;
  title: ComponentChildren;
  /** Already-formatted created date (e.g. via `formatDate`); shown with a 作成:/Created: prefix. */
  createdDate?: string;
  /** Already-formatted updated date; appended as `| 更新:/Updated:` when present. */
  updatedDate?: string;
  /** Pre-rendered excerpt / description text. */
  excerpt?: ComponentChildren;
  /** Pre-rendered tag list. Caller-specific (TagList / ArrowTag list). */
  tags?: ComponentChildren;
  /** Heading level for the title. Defaults to `h2` (use `h3` under a higher heading, e.g. the home news lead). */
  as?: HeadingLevel;
  /** Cross-axis alignment of the thumb cell. Defaults to `start` (pinned to the top). */
  thumbAlign?: Align;
  /** Cross-axis alignment of the meta cell. Defaults to `center` (vertically centered against the thumb). */
  contentAlign?: Align;
  /**
   * Visual scale. `default` = the compact `/notes/`-style row. `lead` = the home
   * news magazine's featured item: a wider thumb track, larger title/excerpt, and
   * a bigger category badge — but the SAME two-row structure (thumb+meta row, then
   * a full-width excerpt row) so it reads cleanly at narrow widths instead of
   * cramming the excerpt into a narrow column beside a tall thumb.
   */
  size?: Size;
}

const ALIGN_CLASS: Record<Align, string> = {
  stretch: '',
  start: 'self-start',
  center: 'self-center',
};

const SIZE_CLASS: Record<
  Size,
  { row: string; pad: string; badge: 'sm' | 'lg'; date: string; title: string; excerpt: string }
> = {
  default: {
    row: 'grid-cols-[80px_1fr] md:grid-cols-[120px_1fr] gap-x-hgap-sm',
    pad: 'pt-vgap-sm',
    badge: 'sm',
    date: 'font-futura font-thin text-xs lg:text-sm',
    title: 'font-futura text-sm md:text-base underline decoration-2 line-clamp-2',
    excerpt: 'font-thin text-xs md:text-sm xl:text-base line-clamp-2',
  },
  lead: {
    row: 'grid-cols-[100px_1fr] sm:grid-cols-[140px_1fr] md:grid-cols-[200px_1fr] gap-x-hgap-sm md:gap-x-hgap-md',
    pad: 'pt-vgap-md',
    badge: 'lg',
    date: 'font-futura font-thin text-sm md:text-base',
    title: 'font-futura text-lg md:text-xl underline decoration-2 line-clamp-2',
    excerpt: 'font-thin text-sm md:text-base line-clamp-3',
  },
};

/**
 * Shared article/news list card. One row = `[square thumb | badge · title · date]`,
 * with the description + tags on a full-width row below.
 *
 * SSR-safe by construction: a bare `<a>` (no hook-based `Link`), CategoryBadge, and
 * plain elements only. The thumbnail and tag list are passed in as slots so each
 * surface renders its own — the home news magazine needs `ItemVisual`'s restock-gallery
 * / news-no logic, while the `/notes/` and guide-series listings just need a single
 * image. This is the single source of truth for the badge → title → 作成-date → excerpt
 * → tags layout shared by all three.
 */
export function ArticleListCard({
  href,
  ariaLabel,
  thumb,
  curatedTag,
  locale = 'ja',
  title,
  createdDate,
  updatedDate,
  excerpt,
  tags,
  as: Heading = 'h2',
  thumbAlign = 'start',
  contentAlign = 'center',
  size = 'default',
}: ArticleListCardProps) {
  const isEn = locale === 'en';
  const sz = SIZE_CLASS[size];
  return (
    <a
      href={href}
      aria-label={ariaLabel}
      class="group block no-underline zd-invert-color-link border-t border-zd-white"
    >
      {/* 1st row: square thumb + (badge / title / date) */}
      <div class={`grid ${sz.row} ${sz.pad}`}>
        <div class={ALIGN_CLASS[thumbAlign]}>{thumb}</div>
        <div class={ALIGN_CLASS[contentAlign]}>
          {/* First line: category badge with the date to its right (no explicit
              color on the date → inherits currentColor so it flips on hover/focus). */}
          {(curatedTag || createdDate) && (
            <div class="flex flex-wrap items-center gap-hgap-xs pb-vgap-2xs">
              {curatedTag && <CategoryBadge tag={curatedTag} locale={locale} size={sz.badge} />}
              {createdDate && (
                <span class={sz.date}>
                  {isEn ? `Created: ${createdDate}` : `作成: ${createdDate}`}
                  {updatedDate && (
                    <span class="text-zd-subtext">
                      {` | ${isEn ? `Updated: ${updatedDate}` : `更新: ${updatedDate}`}`}
                    </span>
                  )}
                </span>
              )}
            </div>
          )}
          <Heading class={sz.title}>{title}</Heading>
        </div>
      </div>
      {/* 2nd row: description + tags, full width */}
      {(excerpt || tags) && (
        <div class="pt-vgap-xs pb-vgap-xs">
          {excerpt && <p class={sz.excerpt}>{excerpt}</p>}
          {tags && <div class="pt-vgap-xs">{tags}</div>}
        </div>
      )}
    </a>
  );
}

export default ArticleListCard;