import Link from 'next/link';
import { postPath, type Locale, type PostSummary } from '@ai-radar/shared';
import type { Dictionary } from '@/lib/dictionary';
import { AdSlot } from '../ads/AdSlot';

/**
 * The secondary column.
 *
 * Secondary by construction: it starts below the daily overview so the
 * overview runs full width, and holds only things a reader might want
 * *after* the main feed. On narrower screens it becomes a row of panels;
 * on mobile it drops to the bottom and loses the ad.
 */
export function Rail({
  trending,
  worthTrying,
  locale,
  dict,
}: {
  trending: PostSummary[];
  worthTrying: PostSummary[];
  locale: Locale;
  dict: Dictionary;
}) {
  if (trending.length === 0 && worthTrying.length === 0) return null;

  return (
    <aside className="rail">
      {trending.length > 0 && (
        <div>
          <h2 className="rail-head">{dict.home.trending}</h2>
          <ol className="rail-list">
            {trending.map((post, index) => (
              <li key={post.id}>
                <Link href={postPath(post.category, post.slug, locale)}>
                  <span className="rail-num">{index + 1}</span>
                  <span>{post.title}</span>
                </Link>
              </li>
            ))}
          </ol>
        </div>
      )}

      {worthTrying.length > 0 && (
        <div>
          <h2 className="rail-head">{dict.home.worthTrying}</h2>
          <ul className="rail-list">
            {worthTrying.map((post) => (
              <li key={post.id}>
                <Link href={postPath(post.category, post.slug, locale)}>
                  <span className="rail-tick" aria-hidden="true">✓</span>
                  <span>{post.title}</span>
                </Link>
              </li>
            ))}
          </ul>
        </div>
      )}

      <AdSlot slotKey="home_sidebar" label={dict.meta.advertisement} />
    </aside>
  );
}