import { Construction } from 'lucide-react';

import { Card, CardContent, CardHeader, CardTitle } from '@ump/shared';

/**
 * Placeholder for admin/council nav targets whose feature pages have not been
 * migrated into frontend_admin yet (slice 5: submissions review, results, users,
 * audit, system panel). Styled with the shared design tokens so the shell looks
 * complete and nothing 404s while surfaces are ported in.
 */
export function ComingSoonPage({ title }: { title?: string }) {
  return (
    <div className="flex min-h-[60vh] items-center justify-center">
      <Card className="w-full max-w-md text-center">
        <CardHeader>
          <div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
            <Construction className="h-6 w-6 text-muted-foreground" />
          </div>
          <CardTitle className="font-serif">{title ?? 'Tính năng đang phát triển'}</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">
            Chức năng này đang được chuyển vào trang quản trị. Vui lòng quay lại sau.
          </p>
        </CardContent>
      </Card>
    </div>
  );
}
