import dynamic from "next/dynamic";

const TimelineView = dynamic(
  () => import("~/components/timeline/TimelineView.js").then((m) => m.TimelineView),
  {
    loading: () => (
      <div className="flex flex-col gap-4 h-full p-6">
        <div className="h-8 w-48 shimmer-skeleton rounded" />
        <div className="h-10 w-full shimmer-skeleton rounded" />
        <div className="flex-1 shimmer-skeleton rounded" />
      </div>
    ),
  },
);

export default function TimelinePage() {
  return (
    <div className="app-page flex h-full flex-col gap-5 pb-6">
      <div className="app-page-header">
        <div>
          <h1 className="app-page-title">Timeline</h1>
          <p className="app-page-subtitle mt-1">Interactive resource planning timeline</p>
        </div>
      </div>
      <TimelineView />
    </div>
  );
}