import React from "react";
import { Metadata } from "next";
import dynamic from "next/dynamic";
import { Skeleton } from "@/components/ui/skeleton";
import Dashboard from "@/components/dashboard/dashboard";

export const metadata: Metadata = {
  title: "Chat Conversation",
  description: "View and respond to customer messages",
};

interface PageProps {
  params: Promise<{
    id: string;
  }>;
}

export default async function ChatDetailPage({ params }: PageProps) {
  const { id } = await params;
  const ChatDetail = dynamic(() => import("@/components/dashboard/ChatDetail"), {
    loading: () => (
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <Skeleton className="h-6 w-48" />
          <div className="flex gap-2">
            <Skeleton className="h-9 w-24" />
            <Skeleton className="h-9 w-24" />
          </div>
        </div>
        <Skeleton className="h-24 w-full" />
        <Skeleton className="h-96 w-full" />
      </div>
    )
  });
  return (
    <Dashboard>
      <ChatDetail chatId={id} />
    </Dashboard>
  );
}