"use client";
import Link from "next/link";
import { useState, useEffect } from "react";
import Image from "next/image";

export default function Home() {
	const [theme, setTheme] = useState<"light" | "dark">("light");

	useEffect(() => {
		// Vérifier les préférences système uniquement côté client
		const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
		const initialTheme = isDarkMode ? "dark" : "light";
		setTheme(initialTheme);
		document.documentElement.classList.toggle("dark", initialTheme === "dark");
	}, []);

	const toggleTheme = () => {
		const newTheme = theme === "light" ? "dark" : "light";
		setTheme(newTheme);
		document.documentElement.classList.toggle("dark", newTheme === "dark");
	};
	return (
		<main data-theme={theme === "dark" ? "dark" : "light"}>
			<div className='heading menu flex justify-between items-center px-8 py-8'>
				<h1 className='text-3xl font-bold '>
					<Link href='/'>Deligraph</Link>
				</h1>

				<ul className='flex gap-4 items-center'>
					<li>
						<Link href='/projects-clients-side'>Projets Clients Side</Link>
					</li>
					<li>
						<Link href='/projects-server-side'>Projets Server Side</Link>
					</li>
					<li>
						<Link href='/contact'>Contact</Link>
					</li>
					<button
						className={`px-4 py-2 rounded-2xl flex items-center gap-2 ${theme === "light" ? "bg-neutral-800 text-white" : "bg-white text-neutral-800"} cursor-pointer`}
						onClick={toggleTheme}>
						<Image
							src={"/icon-switch.svg"}
							className={theme === "light" ? "invert" : ""}
							alt='sun'
							width={20}
							height={20}
						/>
						Switch to {theme === "light" ? "dark" : "light"}
					</button>
				</ul>
			</div>
		</main>
	);
}