import React from "react";
import { Metadata, Viewport } from "next";
import NewChatForm from "@/components/dashboard/NewChatForm";
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() {
  return (
    <Dashboard>
      <div className="container mx-auto py-6 space-y-6">
        <div className="grid grid-cols-1 gap-6">
          <NewChatForm />
        </div>
      </div>
    </Dashboard>
  );
}