import { Link } from "react-router-dom";

import { AsyncSurface } from "../../../presentation/components/async-surface.jsx";
import { DetailPage } from "../../../presentation/templates/index.js";
import { useRouteInput } from "../../../presentation/routes/app-router.js";
import { useReferenceDetail } from "./use-reference-feature.js";

export default function ReferenceResourceDetailPage() {
  const route = useRouteInput();
  const resourceId = String(route.params.resourceId);
  const { query } = useReferenceDetail(resourceId);
  const resource = query.data;

  return (
    <DetailPage
      key={resourceId}
      breadcrumb={
        <Link to="/examples/reference-resources">Reference resources</Link>
      }
      heading={{
        eyebrow: "DetailPage",
        title: resource?.title ?? "Reference detail",
        description: "route param과 detail query의 reset 경계를 확인합니다.",
      }}
      metadata={
        resource ? (
          <dl>
            <dt>Resource ID</dt>
            <dd>{resource.resourceId}</dd>
            <dt>Created</dt>
            <dd>{resource.createdAtLabel ?? "표시 정보 없음"}</dd>
          </dl>
        ) : (
          <p>요약 정보를 준비하고 있습니다.</p>
        )
      }
      feedback={
        <AsyncSurface state={query.state} onRetry={query.retry}>
          {resource ? (
            <p>이 영역에는 제품별 상세 section을 조립할 수 있습니다.</p>
          ) : null}
        </AsyncSurface>
      }
      aside={<p>상세 페이지의 관련 정보 slot입니다.</p>}
    />
  );
}