"use client";

import { Suspense, useState, useCallback } from "react";
import { LayoutConfigurationsTable } from "@/app/components/layout-configurations/LayoutConfigurationsTable";
import { CreateLayoutConfigurationDialog } from "@/app/components/layout-configurations/CreateLayoutConfigurationDialog";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { RefreshCw } from "lucide-react";

export default function LayoutConfigurationsPage() {
  const [refreshKey, setRefreshKey] = useState(0);

  const handleRefresh = useCallback(() => {
    setRefreshKey(prev => prev + 1);
  }, []);

  return (
    <div className="container mx-auto py-8 px-4">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold">Layout Configurations</h1>
        <div className="flex gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={handleRefresh}
            className="flex items-center gap-2"
          >
            <RefreshCw className="h-4 w-4" />
            Refresh
          </Button>
          <CreateLayoutConfigurationDialog />
        </div>
      </div>
      
      <div className="bg-white rounded-lg shadow">
        <Suspense fallback={<LayoutConfigurationsSkeleton />}>
          <LayoutConfigurationsTable key={refreshKey} />
        </Suspense>
      </div>
    </div>
  );
}

function LayoutConfigurationsSkeleton() {
  return (
    <div className="p-4 space-y-4">
      {[...Array(5)].map((_, i) => (
        <div key={i} className="flex items-center space-x-4">
          <Skeleton className="h-12 w-full" />
        </div>
      ))}
    </div>
  );
}