import { SyncButton } from '@/components/search/SyncButton';
import { PolicyExplorerV2Client } from './PolicyExplorerV2Client';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Metadata } from 'next';
import { NuqsAdapter } from 'nuqs/adapters/next/app';

export const metadata: Metadata = {
  title: 'Policy Explorer | TenantPilot',
  description: 'Browse and search Microsoft Intune policy settings with advanced filtering and export',
};

export default async function SearchPage() {
  return (
    <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
      <div className="mx-auto w-full max-w-7xl">
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>Policy Explorer V2</CardTitle>
                <CardDescription>
                  Advanced data table with pagination, sorting, filtering, and CSV export
                </CardDescription>
              </div>
              <SyncButton />
            </div>
          </CardHeader>
          <CardContent>
            <NuqsAdapter>
              <PolicyExplorerV2Client />
            </NuqsAdapter>
          </CardContent>
        </Card>
      </div>
    </main>
  );
}