import type { ReactElement } from "react";

import nextcloud from "../assets/images/nextcloud.svg";
import navidrome from "../assets/images/navidrome.svg";
import forgejo from "../assets/images/forgejo.svg";
import gitea from "../assets/images/gitea.svg";
import search from "../assets/images/search.svg";

interface IconLink {
    label: string;
    url: string;
    src: string;
    invert?: boolean;
}

const iconLinks: IconLink[] = [
    {
        label: "Nextcloud",
        url: "https://nextcloud.aramjonghu.dev",
        src: nextcloud,
    },
    { label: "Navidrome", url: "https://music.aramjonghu.dev", src: navidrome },
    {
        label: "Forgejo Git",
        url: "https://git.aramjonghu.dev/AramJonghu",
        src: forgejo,
    },
    {
        label: "Omnisearch",
        url: "https://xng.aramjonghu.dev",
        src: search,
        invert: true,
    },
    {
        label: "Gitea zach-dev",
        url: "https://git.zach-dev.cc/AramJonghu",
        src: gitea,
    },
];

export default function Footer(): ReactElement {
    const currentYear = new Date().getFullYear();
    const startYear = 2025;

    return (
        <footer className="bg-ctp-mantle flex flex-col md:flex-row items-center justify-around gap-3 px-4 md:px-24 py-6 border-t border-ctp-lavender-800 mt-10">
            <p className="text-sm text-ctp-text">
                &copy; {startYear} - {currentYear} AramJonghu. All rights
                reserved.
            </p>
            <div className="flex items-center gap-2">
                {iconLinks.map((icon) => (
                    <a
                        key={icon.label}
                        href={icon.url}
                        target="_blank"
                        rel="noreferrer"
                        aria-label={icon.label}
                        title={icon.label}
                        className="p-2 cursor-pointer hover:opacity-80 transition-opacity"
                    >
                        <img
                            src={icon.src}
                            alt={icon.label}
                            className={`w-7 h-7 ${icon.invert ? "icon-invert" : ""}`}
                        />
                    </a>
                ))}
            </div>
        </footer>
    );
}
