import ListOfBlog from "@/components/blogs/ListOfBlog";
import HeroImage from "@/components/HeroImage";
import { getDefaultMetadata } from "@/utils/metadata";
import { Metadata } from "next";

const metaDesc =
  "Explore the latest insights, news, and resources on the Dynamic Realty blog. Read our articles today.";

export async function generateMetadata(): Promise<Metadata> {
  const metadata = await getDefaultMetadata();
  metadata.title = `Blog - ${metadata.openGraph?.siteName}`;
  metadata.description = metaDesc;

  return metadata;
}

export default async function Blog(props: { searchParams?: Promise<{ s?: string }> }) {
  const searchParams = await props?.searchParams;

  return (
    <>
      <HeroImage title="Blog" />
      <section className="section section-md bg-colorSection2">
        <div className="container">
          <div>
            <form action="/blog" method="GET" className="form-lg rd-search rd-search-classic">
              <div className="form-wrap">
                <input
                  placeholder="Search blog..."
                  className="form-input"
                  id="rd-search-form-input"
                  type="text"
                  name="s"
                  autoComplete="off"
                  defaultValue={searchParams?.s}
                />
              </div>
              <button className="rd-search-submit" type="submit"></button>
            </form>
          </div>

          <ListOfBlog searchKeyword={searchParams?.s} />
        </div>
      </section>
    </>
  );
}
