import { useTranslations } from 'next-intl';

import { Badge } from '@sport/ui';

/** Placeholder for admin screens that are not built yet. */
export function PageScaffold({
  title,
  description,
  permission,
  milestone,
}: {
  title: string;
  description: string;
  permission: string;
  milestone: string;
}) {
  const t = useTranslations('common');

  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold">{title}</h1>
      <p className="text-ink-500 mt-2 max-w-2xl text-sm">{description}</p>
      <div className="mt-6 flex flex-wrap gap-2">
        <Badge variant="outline">{t('requires', { permission })}</Badge>
        <Badge variant="neutral">{t('planned', { milestone })}</Badge>
      </div>
    </div>
  );
}