import { ArrowUpRight, Baby, ChevronRight, Grid2X2, Heart, Shirt, Sparkles, Zap } from "lucide-react";
import { collections, popularCategories } from "@/data/storefront";
import Link from "next/link";
import { shopHref } from "@/data/catalog";

const icons = [Shirt, Sparkles, Baby, Zap];

export function CategorySidebar({ activeCollection, activeType, wishlistCount, onWishlist }: { activeCollection?: string; activeType?: string; wishlistCount: number; onWishlist: () => void }) {
  return (
    <aside className="category-sidebar" aria-label="Browse categories">
      <div className="sidebar-sticky">
        <p className="eyebrow sidebar-heading">Shop by category</p>
        <nav className="sidebar-navigation" aria-label="Collection categories">
          <Link href="/shop" className={`sidebar-all ${activeCollection === "All" ? "sidebar-active" : ""}`} aria-current={activeCollection === "All" ? "page" : undefined}><Grid2X2 size={17} /> Shop all <ChevronRight size={13} /></Link>
          {collections.map((item, index) => { const Icon = icons[index]; return <Link key={item.id} href={shopHref(item.id)} className={activeCollection === item.name ? "sidebar-active" : ""} aria-current={activeCollection === item.name ? "page" : undefined}><Icon size={18} /><span>{item.id === "men" || item.id === "women" ? `${item.name}'s` : item.name} collection</span><ChevronRight size={13} /></Link>; })}
        </nav>
        <div className="sidebar-popular">
          <p className="eyebrow sidebar-heading">Popular right now</p>
          {popularCategories.map((item) => <Link key={item.name} href={shopHref(item.collection, { type: item.categoryId })} aria-current={activeType === item.categoryId ? "page" : undefined}>{item.name}<ArrowUpRight size={12} /></Link>)}
        </div>
        <button type="button" className="sidebar-wishlist" onClick={onWishlist}><Heart size={15} /> My wishlist <span>{wishlistCount}</span></button>
        <div className="sidebar-note"><span className="little-star">✳</span><p>A wardrobe for<br /><strong>every version of you.</strong></p></div>
      </div>
    </aside>
  );
}