import Link from 'next/link';
import type { Locale, PostSummary } from '@ai-radar/shared';
import { StoryRow } from '../cards/StoryCards';

/**
 * Sections separate by space plus a small header — never by boxes.
 * One hairline under the header, and nothing else.
 */
export function Section({
  title,
  viewAll,
  children,
}: {
  title: string;
  viewAll?: { href: string; label: string };
  children: React.ReactNode;
}) {
  return (
    <section className="section">
      <div className="section-head">
        <h2 className="section-title">{title}</h2>
        {viewAll && (
          <Link href={viewAll.href} className="section-link">
            {viewAll.label} <span className="arrow">→</span>
          </Link>
        )}
      </div>
      {children}
    </section>
  );
}

/** Tier 5 container: editorial rows, no cards. */
export function RowList({ posts, locale }: { posts: PostSummary[]; locale: Locale }) {
  if (posts.length === 0) return null;

  return (
    <ul className="row-list">
      {posts.map((post) => (
        <StoryRow key={post.id} post={post} locale={locale} />
      ))}
    </ul>
  );
}

/**
 * Written copy, not an illustration. Publishing follows quality, so an
 * empty section is a normal state rather than an error.
 */
export function EmptyState({ title, body }: { title: string; body: string }) {
  return (
    <div className="empty">
      <p className="empty-title">{title}</p>
      <p className="t-body-sm">{body}</p>
    </div>
  );
}