import { Metadata } from "next";

import Footer from "@/components/common/footer";
import ClientNavbar from "@/components/pages/client/common/client-navbar";

export const metadata: Metadata = {
  title: "Our community",
  description:
    "Learn more about our engaged community of participants. People for Research connects you with individuals around the world ready to provide insights through usability testing, interviews, focus groups and more.",
  openGraph: {
    title: "Our community",
    description:
      "Learn more about our engaged community of participants. People for Research connects you with individuals around the world ready to provide insights through usability testing, interviews, focus groups and more.",
    images: [
      {
        url: "/global-assets/pfr-logo-og-client.svg",
        alt: "People for Research logo, featuring a person inside a circle, representing a focus on human-centered research and activities.",
        width: 200,
        height: 150,
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Our community",
    images: "/global-assets/pfr-logo-og-client.svg",
    description:
      "Learn more about our engaged community of participants. People for Research connects you with individuals around the world ready to provide insights through usability testing, interviews, focus groups and more.",
  },
};

export default function OurCommunityLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex flex-col min-h-screen bg-others-mistyGray dark:bg-jet">
      <ClientNavbar />
      <main className="flex-grow" id="main-content">
        {children}
      </main>
      <Footer source="client" />
    </div>
  );
}