"use client";

import type { ProductVariant } from "@/data/types";
import { cn } from "@/lib/cn";

type Props = {
  variants: ProductVariant[];
  selected: Record<string, string>;
  onChange: (variantId: string, option: string) => void;
};

/** Size / color / finish picker for product variants. */
export function VariantSelector({ variants, selected, onChange }: Props) {
  return (
    <div className="space-y-5">
      {variants.map((variant) => (
        <div key={variant.id}>
          <p className="mb-2 text-sm font-medium">
            {variant.label}:{" "}
            <span className="text-muted">{selected[variant.id]}</span>
          </p>
          <div className="flex flex-wrap gap-2">
            {variant.options.map((option) => {
              const active = selected[variant.id] === option;
              return (
                <button
                  key={option}
                  type="button"
                  onClick={() => onChange(variant.id, option)}
                  className={cn(
                    "btn-bin btn-bin-sm",
                    active ? "" : "btn-bin-outline",
                  )}
                >
                  {option}
                </button>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}