'use client'

import React from 'react';
import Link from "next/link";
import { usePathname } from 'next/navigation';
import {
    AdminHeaderStyled,
    AdminHeaderContent,
    AdminLogo,
    AdminNav,
    AdminNavLink
} from "@/styles/admin.styled";

const AdminHeader = () => {
    const pathname = usePathname();

    const navItems = [
        { href: "/admin", label: "Бронирования" },
        { href: "/admin/contacts", label: "Контакты" },
        { href: "/admin/hardware", label: "Железо" },
        { href: "/admin/price", label: "Прайс" },
        { href: "/admin/games", label: "Игры" },
        { href: "/admin/faq", label: "FAQ" },
    ];

    return (
        <AdminHeaderStyled>
            <AdminHeaderContent>
                <AdminLogo href="/admin">STRIKE ARENA</AdminLogo>
                <AdminNav>
                    {navItems.map((item) => (
                        <li key={item.href}>
                            <AdminNavLink
                                href={item.href}
                                $active={pathname === item.href}
                                as={Link}
                            >
                                {item.label}
                            </AdminNavLink>
                        </li>
                    ))}
                </AdminNav>
            </AdminHeaderContent>
        </AdminHeaderStyled>
    );
};

export default AdminHeader;