import {AppCard} from '@/components/ui/app-card';
import {StatusBadge} from '@/components/ui/status-badge';

interface FeaturePlaceholderProps {
  title: string;
  description: string;
  milestones: string[];
}

export function FeaturePlaceholder({
  title,
  description,
  milestones,
}: FeaturePlaceholderProps) {
  return (
    <AppCard
      title={title}
      description={description}
      action={<StatusBadge label="阶段 1 骨架完成" variant="success" />}
    >
      <ul className="space-y-3 text-sm leading-6 text-[var(--foreground-secondary)]">
        {milestones.map((item) => (
          <li key={item} className="flex gap-3">
            <span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-[var(--brand-primary)]" />
            <span>{item}</span>
          </li>
        ))}
      </ul>
    </AppCard>
  );
}