import type { Metadata } from "next";
import { MessageCircle } from "lucide-react";
import { ConversationsList } from "@/components/social/conversations-list";

export const metadata: Metadata = { title: "Messages — Epicure" };

export default function MessagesPage() {
  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">Select a conversation</p>
        </div>
      </div>
    </div>
  );
}