import { Construction } from 'lucide-react'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@renderer/components/ui/card'

export function PlaceholderPage({
  title,
  description = '该功能页面已预留，后续可以在这里接入具体业务。'
}: {
  title: string
  description?: string
}): React.JSX.Element {
  return (
    <Card className="shadow-none">
      <CardHeader>
        <div className="flex items-center gap-2">
          <Construction className="size-5 text-primary" />
          <CardTitle>{title}</CardTitle>
        </div>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid min-h-[360px] place-items-center rounded-md border border-dashed bg-muted/30 p-8 text-center">
          <div className="max-w-[360px] space-y-2">
            <p className="text-lg font-semibold">{title}</p>
            <p className="text-sm text-muted-foreground">空页面占位已生成，可以继续补充表单、列表或批处理入口。</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
