import Image from "next/image";
import { business, type Locale } from "@/config/business";
import type { Messages } from "@/messages";
import LanguageSwitcher from "./LanguageSwitcher";

export default function Footer({ t, locale, onLocaleChange }: { t: Messages; locale: Locale; onLocaleChange: (locale: Locale) => void }) {
  return (
    <footer className="px-4 pb-8 pt-14 sm:px-6">
      <div className="mx-auto max-w-7xl rounded-[2.5rem] border border-ink/8 bg-white/65 p-7 backdrop-blur">
        <div className="flex flex-col gap-8 md:flex-row md:items-center md:justify-between">
          <div className="flex items-center gap-4">
            <span className="relative grid size-12 place-items-center overflow-hidden rounded-full bg-white shadow-sm">
              <Image src={business.assets.logo} alt="New Optic logo" fill sizes="48px" className="object-contain p-1" />
            </span>
            <div>
              <p className="font-semibold text-ink">{business.name}</p>
              <p className="mt-1 text-sm text-ink/55">{t.footer.tagline}</p>
            </div>
          </div>
          <LanguageSwitcher locale={locale} onLocaleChange={onLocaleChange} />
        </div>
        <div className="hairline my-7" />
        <div className="flex flex-col gap-3 text-sm text-ink/52 md:flex-row md:items-center md:justify-between">
          <p>{business.phone} · {business.whatsapp} · <a href={business.facebookUrl} target="_blank" rel="noreferrer" className="font-semibold text-ink/70 hover:text-optical">Facebook</a></p>
          <p>© {new Date().getFullYear()} {business.name}. {t.footer.rights}</p>
        </div>
      </div>
    </footer>
  );
}