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

export const metadata: Metadata = {
  title: "Start New Chat",
  description: "Begin a new conversation with a customer",
};

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  themeColor: [
    { media: "(prefers-color-scheme: dark)", color: "#000000" },
    { media: "(prefers-color-scheme: light)", color: "#D53F8C" },
  ],
};

export default function NewChatPage() {
  const NewChatForm = dynamic(() => import("@/components/dashboard/NewChatForm"), {
    loading: () => (
      <div className="space-y-4">
        <Skeleton className="h-6 w-48" />
        <Skeleton className="h-10 w-full" />
        <Skeleton className="h-10 w-full" />
        <Skeleton className="h-32 w-full" />
        <div className="flex gap-2">
          <Skeleton className="h-9 w-24" />
          <Skeleton className="h-9 w-24" />
        </div>
      </div>
    )
  });
  return (
    <Dashboard>
      <div className="container mx-auto py-6 space-y-6">
        <div className="grid grid-cols-1 gap-6">
          <NewChatForm />
        </div>
      </div>
    </Dashboard>
  );
}