import { Card } from "@/components/ui/card";
import { Users } from "lucide-react";
import AssociationDirectoryManager from "@/components/association/AssociationDirectoryManager";
import { useHomeowner } from "@/contexts/HomeownerContext";

export default function ClientDirectoryPage() {
  const { association, loading } = useHomeowner();

  if (loading) return <div className="flex justify-center py-12"><div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" /></div>;

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-foreground">Directory</h1>
        <p className="text-muted-foreground mt-1">Manage association directory listings and homeowner opt-ins.</p>
      </div>
      {association?.id ? (
        <AssociationDirectoryManager associationId={association.id} />
      ) : (
        <Card className="p-12 text-center text-muted-foreground bg-muted/50">
          <Users className="h-8 w-8 mx-auto mb-3 text-muted-foreground/50" />
          <p>No association is linked to this portal yet.</p>
        </Card>
      )}
    </div>
  );
}
