import { routeByPath } from '@/app/navigation'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'

interface PlaceholderPageProps {
  routePath: string
}

export const PlaceholderPage = (props: PlaceholderPageProps) => {
  const route = routeByPath(props.routePath)

  return (
    <section class="space-y-4" data-testid="placeholder-page">
      <Card class="overflow-hidden">
        <CardHeader class="items-start">
          <div>
            <Badge variant="neutral">Planned surface</Badge>
            <CardTitle>{route?.label ?? 'Coming Soon'}</CardTitle>
            <CardDescription>
              {route?.description ?? 'This area is in active development.'}
            </CardDescription>
          </div>
        </CardHeader>
        <CardContent>
          <div class="rounded-[1.5rem] border border-dashed border-border bg-muted/50 p-6">
            <p class="text-sm text-muted-fg">
              This route is scaffolded so navigation and layout stay stable while the rest of the product is
              being tightened up.
            </p>
          </div>
        </CardContent>
      </Card>
    </section>
  )
}
