import { Link } from "react-router-dom";
import { topics } from "@/data/topics";
import { JSX, SVGProps } from "react";

export default function Navigation() {
    return (
        <header className="bg-primary text-primary-foreground py-4 px-6 shadow">
            <div className="container mx-auto flex items-center justify-between">
                <Link to="/" className="flex items-center gap-2 font-bold text-xl">
                    <CodeIcon className="w-6 h-6"/>
                    Dot Java
                </Link>
                <nav className="hidden md:flex items-center gap-6">
                    {topics.map((topic) => (
                        <Link key={topic.id} to={`/topic/${topic.id}`} className="hover:underline">
                            {topic.title}
                        </Link>
                    ))}
                </nav>
            </div>
        </header>
    );
}

function CodeIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
    return (
        <svg
            {...props}
            version="1.1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            width="24"
            height="24"
            viewBox="0 0 512 512"
            enableBackground="23 23 23"
            xmlSpace="preserve"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
        >
            <path fill="#171717" opacity="1.000000" stroke="none"
                  d="
            M240.000000,513.000000
                C160.019394,513.000000 80.538788,513.000000 1.029092,513.000000
                C1.029092,342.394379 1.029092,171.788727 1.029092,1.091547
                C171.563965,1.091547 342.127991,1.091547 512.846008,1.091547
                C512.846008,171.666565 512.846008,342.333252 512.846008,513.000000
                C422.122040,513.000000 331.311005,513.000000 240.000000,513.000000
            M410.993988,312.497375
                C410.656464,320.474792 410.875092,328.522644 409.875427,336.416199
                C407.066986,358.591736 395.828674,374.636627 374.031616,381.696930
                C360.300110,386.144745 346.144257,386.188507 332.139099,382.561066
                C314.212372,377.917847 301.829712,366.828979 296.220825,349.172028
                C293.632660,341.024353 292.780731,332.325165 291.074066,323.528076
                C278.871552,323.528076 265.968353,323.528076 252.056076,323.528076
                C253.064514,332.063293 253.489624,340.370422 255.100037,348.441040
                C260.761566,376.813599 275.974670,398.381897 302.717468,410.285675
                C331.966187,423.304871 362.237671,423.536865 392.339081,413.506226
                C415.206604,405.886169 431.804352,390.516083 441.814331,368.480042
                C448.760773,353.188080 450.558044,336.881256 450.544250,320.242584
                C450.483337,246.767456 450.518280,173.292236 450.518524,99.817055
                C450.518524,98.201042 450.518524,96.585030 450.518524,94.734009
                C411.417328,94.734009 372.851379,94.734009 334.226685,94.734009
                C334.226685,106.749191 334.226685,118.510406 334.226685,130.714798
                C359.846375,130.714798 385.238434,130.714798 410.481018,130.714798
                C410.747650,131.456650 410.950775,131.758057 410.950897,132.059509
                C410.974640,191.872437 410.984070,251.685364 410.993988,312.497375
            M87.691093,348.998718
                C64.397789,356.446655 60.637661,382.525238 66.682755,398.797058
                C73.876472,418.160767 99.387474,426.453217 119.434303,416.107788
                C133.284363,408.960266 139.973038,393.206451 136.584061,375.933624
                C133.839737,361.946350 126.024956,352.428772 112.140968,348.535126
                C104.306267,346.337982 96.337631,346.484802 87.691093,348.998718
            z"/>
            <path fill="#FCFCFC" opacity="1.000000" stroke="none"
                  d="
            M410.993958,311.997833
                C410.984070,251.685364 410.974640,191.872437 410.950897,132.059509
                C410.950775,131.758057 410.747650,131.456650 410.481018,130.714798
                C385.238434,130.714798 359.846375,130.714798 334.226685,130.714798
                C334.226685,118.510406 334.226685,106.749191 334.226685,94.734009
                C372.851379,94.734009 411.417328,94.734009 450.518524,94.734009
                C450.518524,96.585030 450.518524,98.201042 450.518524,99.817055
                C450.518280,173.292236 450.483337,246.767456 450.544250,320.242584
                C450.558044,336.881256 448.760773,353.188080 441.814331,368.480042
                C431.804352,390.516083 415.206604,405.886169 392.339081,413.506226
                C362.237671,423.536865 331.966187,423.304871 302.717468,410.285675
                C275.974670,398.381897 260.761566,376.813599 255.100037,348.441040
                C253.489624,340.370422 253.064514,332.063293 252.056076,323.528076
                C265.968353,323.528076 278.871552,323.528076 291.074066,323.528076
                C292.780731,332.325165 293.632660,341.024353 296.220825,349.172028
                C301.829712,366.828979 314.212372,377.917847 332.139099,382.561066
                C346.144257,386.188507 360.300110,386.144745 374.031616,381.696930
                C395.828674,374.636627 407.066986,358.591736 409.875427,336.416199
                C410.875092,328.522644 410.656464,320.474792 410.993958,311.997833
            z"/>
            <path fill="#FDFDFD" opacity="1.000000" stroke="none"
                  d="
            M88.082108,348.899780
                C96.337631,346.484802 104.306267,346.337982 112.140968,348.535126
                C126.024956,352.428772 133.839737,361.946350 136.584061,375.933624
                C139.973038,393.206451 133.284363,408.960266 119.434303,416.107788
                C99.387474,426.453217 73.876472,418.160767 66.682755,398.797058
                C60.637661,382.525238 64.397789,356.446655 88.082108,348.899780
            z"/>
        </svg>
    );
}