"use client";

import { Suspense } from "react";
import { AppShell, ScreenHeader, useWorkspaceIdParam } from "../../components/AppShell";
import { FilesBrowser } from "../../components/FilesBrowser";

function FilesView() {
  const workspaceId = useWorkspaceIdParam();
  if (!workspaceId) return <main className="page"><div className="empty-state">Choose a workspace first.</div></main>;
  return (
    <AppShell active="messages" title="Files" subtitle="Shared workspace files">
      <ScreenHeader title="Files" subtitle="Search and browse files from conversations you can access" />
      <FilesBrowser workspaceId={workspaceId} />
    </AppShell>
  );
}

export default function FilesPage() {
  return <Suspense fallback={<main className="page"><div className="empty-state">Loading files…</div></main>}><FilesView /></Suspense>;
}