import type { Metadata } from "next";
import { headers } from "next/headers";
import { MessageCircle } from "lucide-react";
import { auth } from "@/lib/auth/server";
import { ConversationsList } from "@/components/social/conversations-list";
import { getMessages } from "@/lib/i18n/server";

export const metadata: Metadata = {};

export default async function MessagesPage() {
  const session = await auth.api.getSession({ headers: await headers() });
  const m = getMessages((session?.user as { locale?: string } | undefined)?.locale);

  return (
    <div className="max-w-5xl mx-auto h-[calc(100vh-8rem)] border rounded-xl overflow-hidden flex">
      <div className="w-full sm:w-80 border-r shrink-0 overflow-y-auto">
        <ConversationsList />
      </div>
      <div className="hidden sm:flex flex-1 items-center justify-center text-muted-foreground">
        <div className="text-center space-y-2">
          <MessageCircle className="h-10 w-10 mx-auto opacity-50" />
          <p className="text-sm">{m.messages.selectConversation}</p>
        </div>
      </div>
    </div>
  );
}