import { PageHeader } from "@/components/page-header"
import { Frame, FramePanel } from "@/components/reui/frame"
import type { LucideIcon } from "lucide-react"

interface PlaceholderPageProps {
  section: string
  title: string
  description: string
  Icon: LucideIcon
}

export function PlaceholderPage({ section, title, description, Icon }: PlaceholderPageProps) {
  return (
    <div className="flex flex-col h-full">
      <PageHeader crumbs={[{ label: section }, { label: title }]} />
      <div className="flex-1 overflow-y-auto p-6">
        <div className="flex flex-col gap-4 max-w-[1400px]">
          <div>
            <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
            <p className="text-sm text-muted-foreground mt-1">{description}</p>
          </div>
          <Frame dense className="w-full">
            <FramePanel className="flex flex-col items-center justify-center py-20 gap-3 text-center">
              <Icon className="size-10 text-muted-foreground/30" />
              <h3 className="text-base font-medium">Скоро</h3>
              <p className="text-sm text-muted-foreground max-w-xs">
                Этот раздел будет подключён следующим. Слой данных и эндпоинты бэкенда уже готовы.
              </p>
            </FramePanel>
          </Frame>
        </div>
      </div>
    </div>
  )
}