import { DocsContent } from './components/docs-content';
import { DocsHeader } from './components/docs-header';
import { DocsSidebar } from './components/docs-sidebar';

type ComponentDocsPageProps = {
  searchParams: Promise<{
    component: string;
    category: string;
  }>;
};

async function ComponentDocsPage(props: ComponentDocsPageProps) {
  let { component, category } = await props.searchParams;

  if (!component) {
    component = 'Input';
  }

  return (
    <div className="bg-background flex h-screen overflow-x-hidden">
      <DocsSidebar selectedComponent={component} selectedCategory={category} />

      <div className="flex flex-1 flex-col overflow-x-hidden">
        <DocsHeader selectedComponent={component} />
        <DocsContent selectedComponent={component} />
      </div>
    </div>
  );
}

export default ComponentDocsPage;