"use client";

import { Translate } from "@/components/translate";
import Link from "next/link";
import Image from "next/image";

interface FooterProps {
  settings?: Record<string, string>;
}

export const Footer = ({ settings }: FooterProps) => (
  <footer className="bg-footerBg pt-12 pb-5">
    <div className="xl:container px-4 text-white flex justify-between flex-wrap xl:flex-nowrap">
      <div className="flex md:flex-col md:justify-between md:w-auto w-full justify-center mb-10 md:mb-0 gap-8">
        <div>
          <div className="relative h-[45px] max-w-[420px]">
            <Link href="/" className="mb-3 max-w-max">
              <Image
                src={settings?.logo || "/img/banner1.png"}
                alt={settings?.title || "logo"}
                className="object-contain max-h-11 h-full !w-auto"
                sizes="45px"
                fill
                unoptimized
              />
            </Link>
          </div>
          <p className="text-base font-medium" suppressHydrationWarning>
            {settings?.description}
          </p>
        </div>
        <div className="md:flex items-center gap-2.5 hidden mb-8 md:mb-0">
          <Link href={settings?.customer_app_ios || "#"} target="_blank">
            <Image
              src="/img/apple_store.png"
              alt="applestore"
              width={147}
              height={55}
              unoptimized
            />
          </Link>
          <Link href={settings?.customer_app_android || "#"} target="_blank">
            <Image
              src="/img/play_market.png"
              alt="playmarket"
              width={147}
              height={55}
              unoptimized
            />
          </Link>
        </div>
      </div>
      <div className="md:gap-28 gap-3 justify-between lg:justify-start w-full lg:max-w-max lg:flex grid sm:grid-cols-2 grid-cols-1 flex-wrap xl:flex-nowrap">
        <div>
          <div className="font-medium text-head md:mb-2.5 mb-1 py-3 sm:py-0">
            <Translate value="information" />
          </div>
          <div className="flex flex-col md:gap-6 gap-2">
            <Link href="/about" className="text-lg font-medium transition-all hover:underline">
              <Translate value="about.company" />
            </Link>
            <Link href="/careers" className="text-lg font-medium transition-all hover:underline">
              <Translate value="work.for.us" />
            </Link>
            <Link href="/contact" className="text-lg font-medium transition-all hover:underline">
              <Translate value="contact.us" />
            </Link>
          </div>
        </div>
        <div>
          <div className="font-medium text-head md:mb-2.5 mb-1 py-3 sm:py-0">
            <Translate value="help" />
          </div>
          <div className="flex flex-col md:gap-6 gap-2">
            <Link href="/faq" className="text-lg font-medium transition-all hover:underline">
              <Translate value="faq" />
            </Link>
            <Link href="/terms" className="text-lg font-medium transition-all hover:underline">
              <Translate value="terms" />
            </Link>
            <Link href="/privacy" className="text-lg font-medium transition-all hover:underline">
              <Translate value="privacy.policy" />
            </Link>
          </div>
        </div>
        <div>
          <div className="font-medium text-head md:mb-2.5 mb-1 py-3 sm:py-0">
            <Translate value="socials" />
          </div>
          <div className="flex flex-col md:gap-6 gap-2">
            <a
              href={settings?.instagram ? `https://${settings.instagram}` : "#"}
              className="text-lg font-medium transition-all hover:underline"
              target="_blank"
              rel="noreferrer"
            >
              اینستاگرام
            </a>
            <a
              href={settings?.facebook ? `https://${settings.facebook}` : "#"}
              className="text-lg font-medium transition-all hover:underline"
              target="_blank"
              rel="noreferrer"
            >
              فیسبوک
            </a>
            <a
              href={settings?.twitter ? `https://${settings.twitter}` : "#"}
              className="text-lg font-medium transition-all hover:underline"
              target="_blank"
              rel="noreferrer"
            >
              ایکس
            </a>
          </div>
        </div>
      </div>
      <div className="grid grid-cols-2 items-center gap-6 md:hidden mt-10 w-full">
        <div className="md:h-16 h-12 relative flex items-start">
          <Link href={settings?.customer_app_ios || "#"} target="_blank">
            <Image
              fill
              src="/img/apple_store.png"
              alt="applestore"
              unoptimized
              style={{ objectPosition: "left", objectFit: "contain" }}
            />
          </Link>
        </div>
        <div className="md:h-16 h-12 relative">
          <Link href={settings?.customer_app_android || "#"} target="_blank">
            <Image
              fill
              src="/img/play_market.png"
              alt="playmarket"
              unoptimized
              style={{ objectPosition: "left", objectFit: "contain" }}
            />
          </Link>
        </div>
      </div>
    </div>
    <div className="xl:container px-4 md:mt-12 mt-6">
      <div className="border-t border-white border-opacity-20 pt-3">
        <p className="text-white text-sm" suppressHydrationWarning>
          {settings?.footer_text}
        </p>
      </div>
    </div>
  </footer>
);