import type { Brand } from "@/lib/models/product"
import { cn } from "@/lib/utils"

type ProductSidebarProps = {
  brands: Brand[]
  activeId: string
  onSelect: (id: string) => void
}

export default function ProductSidebar({
  brands,
  activeId,
  onSelect,
}: ProductSidebarProps) {
  return (
    <aside className="w-30">
      {brands.map(brand => (
        <button
          key={brand.id}
          onClick={() => onSelect(brand.id)}
          className={cn(
            "w-full text-left px-4 py-3 rounded-lg text-sm transition-colors",
            activeId === brand.id
              ? "bg-blue-50 text-blue-600 font-semibold"
              : "text-gray-600 hover:bg-gray-50 hover:text-gray-900",
          )}
        >
          {brand.name}
        </button>
      ))}
    </aside>
  )
}
