"use client"

import * as React from "react"
import Link from "next/link"
import { Laptop, Smartphone, ShirtIcon, Car, Baby, Dumbbell, BookOpen, Gift, MoreHorizontal, Code } from 'lucide-react'
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"

const categories = [
  {
    title: "Электроника",
    icon: <Laptop className="w-5 h-5" />,
    subcategories: ["Ноутбуки", "Планшеты", "Компьютеры", "Аксессуары"]
  },
  {
    title: "Смартфоны и гаджеты",
    icon: <Smartphone className="w-5 h-5" />,
    subcategories: ["Телефоны", "Смарт-часы", "Наушники"]
  },
  {
    title: "Одежда и обувь",
    icon: <ShirtIcon className="w-5 h-5" />,
    subcategories: ["Мужская одежда", "Женская одежда", "Обувь", "Аксессуары"]
  },
  {
    title: "Программное обеспечение",
    icon: <Code className="w-5 h-5" />,
    subcategories: ["Антивирусы", "VPN", "Офисные программы", "Графические редакторы"],
    href: "/software"
  },
  {
    title: "Авто",
    icon: <Car className="w-5 h-5" />,
    subcategories: ["Запчасти", "Шины", "Электроника", "Аксессуары"]
  },
  {
    title: "Детские товары",
    icon: <Baby className="w-5 h-5" />,
    subcategories: ["Игрушки", "Питание", "Одежда", "Коляски"]
  },
  {
    title: "Спорт и отдых",
    icon: <Dumbbell className="w-5 h-5" />,
    subcategories: ["Тренажеры", "Одежда", "Туризм"]
  },
  {
    title: "Книги",
    icon: <BookOpen className="w-5 h-5" />,
    subcategories: ["Художественная", "Учебная", "Детская"]
  },
  {
    title: "Подарки",
    icon: <Gift className="w-5 h-5" />,
    subcategories: ["Сувениры", "Цветы", "Подарочные наборы"]
  },
]

export function CatalogMenu() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Каталог</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div className="w-[500px] p-4">
              <div className="grid gap-3">
                {categories.map((category) => (
                  <Link
                    key={category.title}
                    href={category.href || "#"}
                    className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md group"
                  >
                    <span className="group-hover:text-blue-600">{category.icon}</span>
                    <div className="flex-1">
                      <div className="font-medium group-hover:text-blue-600">{category.title}</div>
                      <div className="text-sm text-gray-500">
                        {category.subcategories.join(" • ")}
                      </div>
                    </div>
                    <MoreHorizontal className="w-5 h-5 text-gray-400" />
                  </Link>
                ))}
              </div>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}