import type { LucideIcon } from "lucide-react";
import { Database } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

type ModulePageProps = {
  title: string;
  eyebrow: string;
  description: string;
  icon: LucideIcon;
  phase: "待接入" | "二期预留" | "三期预留";
};

export function ModulePage({ title, eyebrow, description, icon: Icon, phase }: ModulePageProps): React.ReactElement {
  return (
    <div className="mx-auto flex w-full max-w-7xl flex-col gap-6">
      <section className="flex flex-col gap-3 border-b pb-4 lg:flex-row lg:items-start lg:justify-between">
        <div className="flex min-w-0 items-center gap-3">
          <span className="inline-flex size-9 items-center justify-center rounded-md bg-secondary text-primary">
            <Icon className="size-4" aria-hidden="true" />
          </span>
          <div className="min-w-0">
            <div className="flex items-center gap-2">
              <h1 className="truncate text-xl font-semibold tracking-normal">{title}</h1>
              <Badge variant="secondary">{phase}</Badge>
            </div>
            <p className="mt-1 truncate text-sm text-muted-foreground">{eyebrow}</p>
            <p className="mt-2 max-w-3xl text-sm text-muted-foreground">{description}</p>
          </div>
        </div>
      </section>

      <section>
        <Card className="max-w-3xl">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-base">
              <Database className="size-5 text-primary" aria-hidden="true" />
              未接入真实数据源
            </CardTitle>
            <CardDescription>当前模块暂不展示业务记录、统计指标或流程入口。</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground">
              接入对应的 Drizzle 查询和操作 API 前，这里只保留模块位置，不渲染未落库记录或伪造待办。
            </p>
          </CardContent>
        </Card>
      </section>
    </div>
  );
}