import { appConstants } from '@/assets/constants';
import images from '@/assets/images/images';
import { t } from '@/locales/translates';
import Image from 'next/image';
import Link from 'next/link';

export default function FooterInfo({
  withLogo,
  className,
}: {
  withLogo?: boolean;
  className?: string;
}) {
  return (
    <div className={`flex w-full flex-col gap-3 lg:w-auto ${className}`}>
      {withLogo && (
        <Link href="/" className="mx-auto h-8 w-auto">
          <Image
            alt="logo"
            src={images.logo}
            className="h-full w-auto object-contain"
          />
        </Link>
      )}

      <p className="text-sm tracking-normal">{t('footer_slogan') as string}</p>
      <div className="flex items-center gap-4 max-lg:justify-center">
        {appConstants.socials.map((social) => (
          <Link
            href={social.link}
            key={social.title}
            className="text-white lg:flex-1"
          >
            {/* <Image
              alt={social.title}
              src={images[social.title]}
              className="h-6 w-6 object-contain"
            /> */}
            {social.title}
          </Link>
        ))}
      </div>
    </div>
  );
}