"use client";

import Link from "next/link";
import ThemeToggle from "./ThemeToggle";

export default function Header() {
    return (
        <header className="flex items-center justify-between px-6 py-4 bg-surface border-b border-border">
            <Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
                <div className="w-8 h-8     flex items-center justify-center text-white font-bold text-sm">
                    <svg width="172" height="172" viewBox="0 0 172 172" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fillRule="evenodd" clipRule="evenodd" d="M25.1888 146.811C41.432 163.055 63.0285 172 85.9999 172C108.971 172 130.568 163.055 146.811 146.811C163.054 130.568 172 108.971 172 86.0002C172 63.0288 163.054 41.432 146.811 25.1888C130.568 8.94554 108.971 0 85.9999 0C63.0285 0 41.432 8.94554 25.1888 25.1888C8.94554 41.432 0 63.0288 0 86.0002C0 108.971 8.94554 130.568 25.1888 146.811ZM80.5695 86.1881C80.5695 89.2082 83.0177 91.6566 86.0381 91.6566C89.0584 91.6566 91.5066 89.2082 91.5066 86.1881C91.5066 83.1677 89.0584 80.7192 86.0381 80.7192C83.0177 80.7192 80.5695 83.1677 80.5695 86.1881ZM114.662 51.2167H114.669L114.655 87.0526C114.198 102.465 101.561 114.819 86.0381 114.819C79.6458 114.819 73.7434 112.724 68.9787 109.183V119.902H68.9255C68.9569 120.147 68.9787 120.395 68.9787 120.649C68.9787 123.865 66.3716 126.472 63.1554 126.472C59.9391 126.472 57.332 123.865 57.332 120.649C57.332 120.395 57.3538 120.147 57.3852 119.902H57.332V84.9622C57.9744 69.7185 70.6361 57.5564 86.0381 57.5564C92.3971 57.5564 98.271 59.631 103.023 63.1381V51.2167H103.03C103.11 48.0704 105.68 45.5427 108.846 45.5427C112.012 45.5427 114.582 48.0704 114.662 51.2167Z" fill="white"/>
                    </svg>
                </div>
                <h1 className="text-xl font-semibold text-text-primary">
                    Tools 🛠&nbsp;️🛠&nbsp;🛠️
                </h1>
            </Link>
            <div className="flex items-center gap-4">
                <ThemeToggle />
            </div>
        </header>
    );
}