
import Image from "next/image";
import Link from "next/link";
import { ReactNode } from "react";
import { InstagramIcon, Whatsapp, XIcon } from "./icons";
import { Mail, Phone } from "lucide-react";
import OptimizedImage from "./global/optimized-image";

const iconClasses = "w-8 h-auto fill-background hover:fill-muted transition-all";
const contactIconClasses = "w-8 h-auto stroke-background hover:stroke-muted transition-all";

export interface FooterData {
    title: string;
    description: string;
    sigature: boolean;
    logo: {
        src: string;
        alt: string;
    };
    socials: {
        icon: ReactNode;
        link: string;
    }[];
    contact?: {
        icon: ReactNode;
        href: string;
    }[];
};

const footerData: FooterData = {
    title: "SOURCES & NATURE",
    description: "Guide professionnel de canyoning dans l'Ain et le Jura",
    sigature: true,
    logo: {
        src: "/images/logo.png",
        alt: "Logo Sources et Nature - Guide de canyoning dans l'Ain et le Jura"
    },
    socials: [
        {
            icon: <Whatsapp className={iconClasses} />,
            link: "https://wa.me/+33613223616"
        },
        {
            icon: <InstagramIcon className={iconClasses} />,
            link: "https://www.instagram.com/stef_sources.et.nature/"
        },
    ],
    contact: [
        {
            icon: <Phone className={contactIconClasses} />,
            href: "tel:+33613223616"
        }
    ]
};

export default function Footer() {
    const titleStyle = "text-xl font-bold text-background text-center";
    const year = new Date().getFullYear();
    return (
        <footer className="w-full section-padding" id="contact">
            <article className="w-[90%] mx-auto py-12 flex-row bg-primary rounded-lg">
                <div className="w-full flex items-center justify-center">
                    <OptimizedImage
                        src={footerData.logo.src}
                        alt={footerData.logo.alt}
                        containerClassName="w-24 h-24 rounded-lg bg-background relative"
                        className="rounded-lg object-cover"
                    />
                </div>
                <div className="flex-row pt-4">
                    <h1 className={titleStyle}>{footerData.title}</h1>
                    {/* <p className={titleStyle}>{footerData.description}</p> */}
                </div>
                <Link href="https://g.co/kgs/RDrfKL2" target="_blank">
                    <p className={`${titleStyle}`}>✨ Avis Google</p>
                </Link>
                <p className={`${titleStyle} pt-2`}>
                    +33 6 13 22 36 16
                </p>
                <div className="flex justify-center gap-6 pt-6">
                    {footerData.socials.map((social, index) => (
                        <Link href={social.link} key={index} target="_blank">
                            {social.icon}
                        </Link>
                    ))}
                    {footerData.contact && (
                        <>
                            {footerData.contact.map((contact, index) => (
                                <Link href={contact.href} key={index}>
                                    {contact.icon}
                                </Link>
                            ))}
                        </>
                    )}
                </div>
                <div>
                    <p className="text-background text-center pt-4">Copyright © {year} - All right reserved</p>
                    {footerData.sigature && (
                        <p className="text-background opacity-70 text-center">Made with ❤️ by
                            <Link href="https://itskody.fr" target="_blank" className="font-bold"> KODY.</Link>
                        </p>
                    )}
                </div>
            </article>
        </footer>
    );
};
