import Image from "next/image";
import { DiscordLogoIcon, InstagramLogoIcon, ReaderIcon } from "@radix-ui/react-icons";
import YoutubeSvg from "./youtube_wider.svg";
import FacebookSvg from "./facebook.svg";

import { ChangelogWrapper } from "(app)/_components/ChangelogWrapper";
import { prisma } from "@repo/db";

export const Footer = async () => {
	const latestChangelog = await prisma.changelog.findFirst({
		orderBy: {
			createdAt: "desc",
		},
	});

	return (
		<footer className="footer bg-base-200 mt-4 flex items-center justify-between rounded-lg p-4 shadow-md">
			{/* Left: Impressum & Datenschutz */}
			<div className="flex gap-4 text-sm">
				<a href="https://virtualairrescue.com/impressum/" className="hover:text-primary">
					Impressum
				</a>
				<a href="https://virtualairrescue.com/datenschutz/" className="hover:text-primary">
					Datenschutzerklärung
				</a>
				<ChangelogWrapper latestChangelog={latestChangelog} />
			</div>

			{/* Center: Copyright */}
			<p className="text-sm">Copyright © {new Date().getFullYear()} - Virtual Air Rescue</p>

			{/* Right: Social Icons */}
			<div className="flex gap-4">
				<div className="tooltip tooltip-top" data-tip="Discord">
					<a
						href="https://discord.gg/virtualairrescue"
						target="_blank"
						rel="noopener noreferrer"
						className="hover:text-primary"
					>
						<DiscordLogoIcon className="h-5 w-5" />
					</a>
				</div>

				<div className="tooltip tooltip-top" data-tip="YouTube">
					<a
						href="https://www.youtube.com/@VirtualAirRescue"
						target="_blank"
						rel="noopener noreferrer"
						className="hover:text-primary text-white"
					>
						<Image src={YoutubeSvg} className="h5 w-5 invert" alt="Youtube Icon" />
					</a>
				</div>

				<div className="tooltip tooltip-top" data-tip="Facebook">
					<a
						href="https://www.facebook.com/people/Virtual-Air-Rescue/100090867294041/#"
						target="_blank"
						rel="noopener noreferrer"
						className="hover:text-primary text-white"
					>
						<Image src={FacebookSvg} className="h5 w-5 invert" alt="Youtube Icon" />
					</a>
				</div>

				<div className="tooltip tooltip-top" data-tip="Instagram">
					<a
						href="https://www.instagram.com/virtualairrescue/"
						target="_blank"
						rel="noopener noreferrer"
						className="hover:text-primary"
					>
						<InstagramLogoIcon className="h-5 w-5" />
					</a>
				</div>
				<div className="tooltip tooltip-top" data-tip="Knowledgebase">
					<a href="https://docs.virtualairrescue.com/" className="hover:text-primary">
						<ReaderIcon className="h-5 w-5" />
					</a>
				</div>
			</div>
		</footer>
	);
};