import type { Metadata } from "next";
import { listMembers } from "@/lib/members/queries";
import { resolvePageMetadata } from "@/lib/seo/metadata";
import { MemberCard } from "@/components/members/MemberCard";
import { FadeInSection } from "@/components/ui/FadeInSection";

export async function generateMetadata(): Promise<Metadata> {
  return resolvePageMetadata("/uyeler", {
    title: "Üyeler",
    description: "SohbeteGir.com üyelerini keşfet, profillerini incele, beğen ve sohbete başla.",
  });
}

export default async function MembersPage() {
  const members = await listMembers();

  return (
    <div className="relative overflow-hidden">
      <div className="pointer-events-none absolute -left-40 -top-20 h-[420px] w-[420px] rounded-full bg-[radial-gradient(circle,oklch(85%_0.07_18_/_.4),transparent_70%)]" />

      <div className="relative mx-auto max-w-5xl px-6 py-14">
        <div className="fade-up mb-10 text-center">
          <span className="mb-3 inline-block rounded-full bg-gradient-to-r from-accent to-accent-2 px-4 py-1.5 text-[12px] font-extrabold uppercase tracking-wide text-white">
            Üyeler
          </span>
          <h1 className="text-[28px]">SohbeteGir Ailesiyle Tanış</h1>
        </div>

        {members.length === 0 ? (
          <p className="text-center text-[13.5px] text-text-muted">Henüz üye yok.</p>
        ) : (
          <FadeInSection className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
            {members.map((member, index) => (
              <div key={member.id} className={index === 0 ? "col-span-2" : ""}>
                <MemberCard member={member} featured={index === 0} />
              </div>
            ))}
          </FadeInSection>
        )}
      </div>
    </div>
  );
}