"use client";

import { Card, CardHint, CardTitle } from "@agy/ui";

/**
 * Placeholder for a page whose backend phase has not landed yet.
 *
 * It is deliberately explicit about *what* will live here rather than showing a
 * vague "coming soon" — a reader can tell whether the page is missing or the
 * feature is.
 */
export function PlaceholderPage({
  title,
  description,
  planned,
}: {
  title: string;
  description: string;
  planned: string[];
}) {
  return (
    <div className="flex flex-col gap-5">
      <header className="flex flex-col gap-1">
        <h1 className="text-lg font-medium text-slate-100">{title}</h1>
        <p className="text-sm text-slate-400">{description}</p>
      </header>

      <Card>
        <CardTitle>در این صفحه چه چیزی ساخته می‌شود</CardTitle>
        <CardHint>
          این بخش در فاز بعدی پیاده‌سازی می‌شود. فهرست زیر قرارداد نهایی این صفحه است.
        </CardHint>
        <ul className="mt-3 flex flex-col gap-2">
          {planned.map((item) => (
            <li key={item} className="flex items-start gap-2 text-xs text-slate-300">
              <span aria-hidden className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-accent" />
              <span>{item}</span>
            </li>
          ))}
        </ul>
      </Card>
    </div>
  );
}