import Link from "next/link";
import { ArrowLeft, MessageSquare } from "lucide-react";
import { CommunityChat } from "@/components/CommunityChat";

export default function CommunityChatPage() {
  return (
    <main className="min-h-screen pt-20">
      <div className="container mx-auto px-4 py-6">
        <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
          <div className="flex items-center gap-2">
            <MessageSquare className="h-5 w-5 text-primary" />
            <div>
              <h1 className="font-display text-2xl font-bold">Community Chat</h1>
              <p className="text-sm text-muted-foreground">Ngobrol real-time bareng pengguna lain.</p>
            </div>
          </div>
          <Link
            href="/"
            className="inline-flex items-center gap-2 shrink-0 rounded-full border border-border/60 bg-card/70 px-3 py-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-colors"
          >
            <ArrowLeft className="h-4 w-4" />
            Kembali
          </Link>
        </div>
        <CommunityChat />
      </div>
    </main>
  );
}