"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import ChatList from "@/components/dashboard/ChatList";
import Dashboard from "@/components/dashboard/dashboard";
import { MessageCircle } from "lucide-react";

export default function ChatsPage() {
  const router = useRouter();

  useEffect(() => {
    const authToken = document.cookie
      .split("; ")
      .find((row) => row.startsWith("Authorization="))
      ?.split("=")[1];

    if (!authToken) {
      router.push("/login");
    }
  }, [router]);

  return (
    <Dashboard>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
            <MessageCircle className="mr-2 h-6 w-6" />
            Customer Chats
          </h1>
        </div>
        
        <ChatList />
      </div>
    </Dashboard>
  );
}