Horizontal Blog Card

'use client';

import type { CSSProperties } from 'react';
import './BlogHorizontalCard.css';

/** "a: b; --c: d" → style object */
function st(css: string | undefined): CSSProperties {
  const o: Record<string, string> = {};
  for (const decl of String(css ?? '').split(';')) {
    const i = decl.indexOf(':');
    if (i < 0) continue;
    const k = decl.slice(0, i).trim();
    if (k) o[k.startsWith('--') ? k : k.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = decl.slice(i + 1).trim();
  }
  return o as CSSProperties;
}

/**
 * BlogHorizontalCard — Landscape card layout for blog feeds or news items.
 * 
 * @param {string} title - The blog post title.
 * @param {string} description - Brief summary or excerpt.
 * @param {string} tag - Featured label or category (e.g. "Tutorial").
 * @param {string} thumbUrl - Optional thumbnail image URL.
 */
export interface BlogHorizontalCardProps {
  title: string;
  description: string;
  tag: string;
  thumbUrl?: string;
}

export function BlogHorizontalCard({ title, description, tag, thumbUrl }: BlogHorizontalCardProps) {
  return (
    <>
      <article className="blog-h-card" data-rk-6cf958="">
        <div className="blog-h-card__thumb" style={st(thumbUrl ? `background-image: url('${thumbUrl}'); background-size: cover;` : '')} data-rk-6cf958=""></div>
        <div className="blog-h-card__content" data-rk-6cf958="">
          <span className="blog-h-card__tag" data-rk-6cf958="">{tag}</span>
          <h4 className="blog-h-card__title" data-rk-6cf958="">{title}</h4>
          <p className="blog-h-card__desc" data-rk-6cf958="">{description}</p>
        </div>
      </article>
    </>
  );
}

export default BlogHorizontalCard;

/* BlogHorizontalCard — ported from astro-component-kit (cards/BlogHorizontalCard.astro) */

.blog-h-card:where([data-rk-6cf958]) { 
  display: flex; gap: var(--sp-6, 1.5rem); 
  background: var(--c-bg-elev, rgba(255,255,255,0.02)); 
  border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
  border-radius: var(--r-lg, 16px); 
  overflow: hidden; 
}
.blog-h-card__thumb:where([data-rk-6cf958]) { 
  width: 150px; 
  background-color: var(--c-bg, #1e293b); 
  flex-shrink: 0; 
}
.blog-h-card__content:where([data-rk-6cf958]) { padding: var(--sp-5, 1.2rem); }
.blog-h-card__title:where([data-rk-6cf958]) { color: var(--c-text-1, #fff); margin: 0.5rem 0; font-size: 1.1rem; }
.blog-h-card__desc:where([data-rk-6cf958]) { font-size: 0.85rem; color: var(--c-text-2, #94a3b8); margin: 0; }
.blog-h-card__tag:where([data-rk-6cf958]) { font-size: 0.7rem; color: var(--c-primary, #818cf8); font-weight: 700; text-transform: uppercase; }

@media (max-width: 600px) {
  .blog-h-card:where([data-rk-6cf958]) { flex-direction: column; }
  .blog-h-card__thumb:where([data-rk-6cf958]) { width: 100%; height: 180px; }
}