import { useState } from "react";
import { MetaFunction } from "@remix-run/node";
import MainSection from "~/components/explore/MainSection";
import SearchSection from "~/components/explore/SearchSection";
import ExploreTopBar from "~/components/explore/ExploreTopBar";

export default function Explore() {
  const [isActiveSearchBar, setIsActiveSearchBar] = useState(false);
  const [searchValue, setSearchValue] = useState("");
  return (
    <div className="flex flex-col">
      <div className="lg:hidden">
        <ExploreTopBar
          setIsActiveSearchBar={setIsActiveSearchBar}
          searchValue={searchValue}
          setSearchValue={setSearchValue}
        />
      </div>
      {isActiveSearchBar ? (
        <SearchSection searchValue={searchValue} />
      ) : (
        <MainSection />
      )}
    </div>
  );
}

export const meta: MetaFunction = () => {
  const title = "کاوش و جستجو | ویترون - کشف محصولات جدید";
  const description =
    "کاوش در دنیای محصولات ویترون. جستجوی هوشمند، دسته‌بندی‌های متنوع و کشف محصولات جدید و پیشنهادی.";
  const imageUrl =
    "https://vitrownstatics.s3.ir-thr-at1.arvanstorage.ir/SVG-06.svg?versionId=";

  return [
    { title },
    { name: "description", content: description },
    {
      name: "keywords",
      content: "کاوش محصولات، جستجو، دسته‌بندی، محصولات جدید، پیشنهادات",
    },
    { name: "robots", content: "index, follow" },

    // Open Graph
    { property: "og:type", content: "website" },
    { property: "og:title", content: title },
    { property: "og:description", content: description },
    { property: "og:image", content: imageUrl },
    { property: "og:site_name", content: "ویترون" },
    { property: "og:locale", content: "fa_IR" },

    // Twitter Card
    { name: "twitter:card", content: "summary_large_image" },
    { name: "twitter:title", content: title },
    { name: "twitter:description", content: description },
    { name: "twitter:image", content: imageUrl },
  ];
};