import Image from "next/image";
import Link from "next/link";

const about = ["سوالات متداول", "تماس با ما", "درباره ما"];

function LayoutRegister({ children, matchedCity }) {
  return (
    <div
      className="flex padding-responsive items-center justify-center pt-[32px] 
        overflow-auto flex-col h-screen w-full bg-banner-stroke !bg-bottom !bg-no-repeat !bg-cover
        !pb-[60px] md:!pb-[60px]"
    >
      <Link href="/">
        <div className="flex items-center justify-center gap-[5px] sm:mt-0">
          <Image
            src="/assets/images/logo.png"
            width={40}
            height={40}
            alt="logo"
          />
          <p className="text-[#5559CE] text-[20px] font-bold">
            {matchedCity?.site_name || "نوبت ۷۲۴"}
          </p>
        </div>
      </Link>
      {children}
      <div className="fixed bottom-0 left-0 bg-[#FAFAFA] w-full pb-[10px] md:pb-[14px] px-[18px] sm:px-[67px] md:px[117px] lg:px-[166px]">
        <div className="bg-border-t-gradient-sign h-px w-full"></div>
        <div className="flex items-center justify-center gap-[32px] sm:gap-[40px] md:gap-[48px] lg:gap-[56px] mt-[10px] md:mt-[14px]">
          {about.map((item, idx) => (
            <Link href="/" key={idx}>
              <p
                className="text-[#494CB3] text-[14px] md:text-[16px] font-normal"
                key={idx}
              >
                {item}
              </p>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}

export default LayoutRegister;