import { Copyright } from "lucide-react";
import Link from "next/link";

export function Footer() {
	return (
		<footer
			className={
				"flex flex-col-reverse md:flex-row justify-between gap-2 md:gap-1 items-center p-2 border-t-2 w-full"
			}
		>
			<div
				className={
					"flex flex-row gap-1 items-center justify-center md:justify-start md:w-1/3 opacity-50"
				}
			>
				<Copyright className={"w-4"} />
				<h4 className={"pr-2"}>Yidhra Studio</h4>
				<p>
					MIT <em>2024</em>
				</p>
			</div>
			<div
				className={
					"flex flex-col flex-wrap md:flex-row max-h-24 md:flex-nowrap gap-1 md:gap-2 items-center justify-evenly w-full md:w-1/3"
				}
			>
				<Link
					href={"#"}
					className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}
				>
					<h3 className={"text-nowrap text-center"}>Data privacy</h3>
				</Link>
				<Link
					href={"#"}
					className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}
				>
					<h3 className={"text-nowrap text-center"}>Terms and conditions</h3>
				</Link>
				<Link
					href={"#"}
					className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}
				>
					<h3 className={"text-nowrap text-center"}>Legal notice</h3>
				</Link>
				<Link
					href={"#"}
					className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}
				>
					<h3 className={"text-nowrap text-center"}>Support Center</h3>
				</Link>
			</div>
			<div
				className={
					"flex flex-row gap-1 items-center justify-center md:justify-end md:w-1/3"
				}
			></div>
		</footer>
	);
}