import { library } from "@fortawesome/fontawesome-svg-core";
import { fab } from "@fortawesome/free-brands-svg-icons";
import { far } from "@fortawesome/free-regular-svg-icons";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Image from "next/image";
import Config from "../../config.json";

library.add(fab, far, fas); // Loading in the icons from FontAwesome

export default function Home() {
	const {
		background,
		infoCard,
		avatar,
		name,
		links,
		options,
		description,
		theme = "dark", // Fallback to dark if no theme was found
	} = Config; // All of the settings pulled from the config file

	// Theme colors to use when using the selected theme
	const themeColors: {
		[key: string]: {
			background: string;
			textColor: string;
		};
	} = {
		dark: {
			background: "bg-neutral-900",
			textColor: "text-white",
		},
		light: {
			background: "bg-white",
			textColor: "text-black",
		},
	};
	const selectedTheme = themeColors[theme]; // The theme to use

	return (
		<>
			<main
				className={`flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 ${selectedTheme.textColor}`}
			>
				<div
					className={`absolute inset-0 filter w-screen h-screen ${
						background.blur && "blur-sm"
					}`}
					style={
						background.showBackground
							? {
									zIndex: 0,
									background: background.darken.enabled
										? `linear-gradient(rgba(0, 0, 0, ${background.darken.amount}), rgba(0, 0, 0, ${background.darken.amount})),
                    url(${background.backgroundImage})`
										: `url(${background.backgroundImage})`,
									backgroundSize: "cover",
									backgroundBlendMode: "multiply",
							  }
							: {}
					}
				></div>
				<div
					className={`${selectedTheme.background} rounded-lg text-center shadow-lg`}
					style={{
						zIndex: 1,
						opacity: infoCard.transparency,
					}}
				>
					<div className="m-5">
						<div className="flex flex-col items-center justify-center">
							<Image
								src={avatar}
								alt="Avatar"
								width={120}
								height={120}
								className="rounded-full"
							/>
							<div className="mb-3"></div>
							<h1 className="text-4xl font-bold">{name}</h1>
						</div>

						<p className="mt-4 text-lg max-w-lg">{description}</p>

						<div className="flex flex-col items-center">
							{links.map((link, index) => {
								const icons: any = link.icon?.split(" ") ?? [];

								return (
									<a
										key={index}
										href={link.url}
										target="_blank"
										rel="noopener noreferrer"
										className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded
                      text-white ${link.color.normal} hover:brightness-75 transition`}
									>
										{link.icon && (
											<>
												<FontAwesomeIcon icon={icons} />
												<div className="ml-2"></div>
											</>
										)}
										<p>{link.title}</p>
									</a>
								);
							})}
						</div>
					</div>
				</div>

				<div className="absolute bottom-0 right-0 mb-5 mr-5">
					{options.showSourceLink && (
						<h1 className="mt-5 text-blue-300">
							<a
								href="https://git.fascinated.cc/Fascinated/simple-links"
								target="_blank"
							>
								Website Source
							</a>
						</h1>
					)}
				</div>
			</main>
		</>
	);
}