---
import { useTranslations } from '@/i18n/utils'
import { Image } from 'astro:assets'
import logoSrc from '@/assets/logo.png'
import type { z } from 'astro:content'
import type { footerSchema } from '@/content.config'
import { SocialMediaIcon } from './SocialMediaIcon'

type Props = z.infer<typeof footerSchema> & {
  lang?: string
}

const { lang, socialMediaLinks } = Astro.props
const t = useTranslations(lang)
---

<footer id="contacts" class="flex w-full flex-col items-center gap-4 text-center md:gap-6">
  <iframe
    transition:persist
    src=`https://yandex.ru/map-widget/v1/?um=constructor%3A069b17526dc83cbf87c488f13ae089eb3af0f8f74af57e1be82e183434693562&source=constructor&scroll=false&lang=${lang}`
    width="100%"
    height="400"
    frameborder="0"></iframe>
  <div class="flex flex-col items-center gap-3 px-4 py-6 text-center md:gap-4 md:px-6 md:py-8">
    <Image src={logoSrc} alt="logo" class="h-32 w-auto md:h-48" />
    <p class="text-light text-sm">
      © {new Date().getFullYear()}
      {t('footer.copyright')}
    </p>
    {
      socialMediaLinks && (
        <div class="flex gap-4 text-white">
          {socialMediaLinks.map(({ href, target, icon }) => {
            return (
              <a href={href} target={target} rel="noopener noreferrer">
                <SocialMediaIcon
                  type={icon}
                  className="fill-text hover:fill-text-light transition-all duration-300"
                />
              </a>
            )
          })}
        </div>
      )
    }
  </div>
</footer>