import Image from "next/image";
import Link from "next/link";
import React from "react";

export const PageFooter: React.FC = () =>
    <div className="bg-base-100 text-base-content mt-10">
        <footer className="footer mx-auto max-w-2xl px-4 py-10">
            <div>
                <div className="flex items-center gap-2">
                    <Image src="/icon4.png" alt="logo" width={64} height={64}></Image>
                    <div className="font-title inline-flex text-3xl font-black ml-2">Bills Tracker</div>
                </div>
                <p className="text-base-content/70 mb-5">Web app for tracking home utility bills</p>
                <Link href="/" className="link link-hover">Home</Link>
                <Link href="/policy/" className="link link-hover">Privacy Policy</Link>
                <Link href="/terms/" className="link link-hover">Terms of Service</Link>
            </div>
            <div>
                <span className="footer-title opacity-70">documents</span>
                <a href="https://tailwindcss.com/docs/" target="_blank" className="link link-hover">tailwindcss.com</a>
                <a href="https://heroicons.com/" target="_blank" className="link link-hover">heroicons.com</a>
                <a href="https://daisyui.com/components/" target="_blank" className="link link-hover">daisyui.com</a>
            </div>

        </footer>
    </div>;