'use client';
import Image from 'next/image';
import Link from 'next/link';
import globePic from '../../public/globe.svg';
import emailPic from '../../public/email.svg';
import rssPic from '../../public/rss-feed.svg';
import supportPic from '../../public/support.svg';
import settingsPic from '../../public/settings.svg';
import AnimatedLink from '../animatedLink';


export default function Toolbar() {
    return (
        <div className="flex h-24 justify-between items-center border-white border-t border-b">
            <div className="flex items-baseline">
                <p><AnimatedLink href='#'>Science</AnimatedLink> | <AnimatedLink href='#'>Software</AnimatedLink> | <AnimatedLink href='#'>Hardware</AnimatedLink> | <AnimatedLink href='#'>Rockets</AnimatedLink> | <AnimatedLink href='#'>Startups</AnimatedLink></p>
            </div>
            <div className="flex items-baseline">
                <ul className="inline-flex items-center gap-4">
                    <li className="inline filter brightness-0 invert">
                        <Link href="#">
                            <Image
                                src={globePic}
                                alt="lang"
                                width={32}
                                height={32}
                            />
                        </Link>
                    </li>
                    <li className="inline filter brightness-0 invert">
                        <Link href="#">
                            <Image
                                src={emailPic}
                                alt="email"
                                width={32}
                                height={32}
                            />
                        </Link>
                    </li>
                    <li className="inline filter brightness-0 invert">
                        <Link href="#">
                            <Image
                                src={rssPic}
                                alt="rss"
                                width={32}
                                height={32}
                            />
                        </Link>
                    </li>
                    <li className="inline filter brightness-0 invert">
                        <Link href="#">
                            <Image
                                src={settingsPic}
                                alt="settings"
                                width={32}
                                height={32}
                            />
                        </Link>
                    </li>
                </ul>
            </div>
        </div>
    );
}