/**
 * Chips Tab Component
 * Configure the appearance and behavior of individual variation chips (swatches).
 */
import { BaseTabProps } from "../types";
import { ColorPicker } from "../../components/ColorPicker";
import { HighlightableField } from "../../components/HighlightableField";

export interface ChipsTabProps extends BaseTabProps {}

export function ChipsTab({ settings, setSettings, adminColor }: ChipsTabProps) {
  return (
    <div className="b3-wvs-space-y-6">
      <h2 className="b3-wvs-text-xl b3-wvs-font-semibold">Variation Chips</h2>
      <p className="b3-wvs-text-sm b3-wvs-text-gray-600">
        Configure the appearance and behavior of individual variation chips
        (swatches).
      </p>

      {/* General Chip Settings */}
      <HighlightableField id="chips-selected-color">
        <div className="b3-wvs-border b3-wvs-border-gray-200 b3-wvs-rounded-lg b3-wvs-p-6">
          <ColorPicker
            label="Selected Color"
            description="Sets the active chip highlight color after a variation is selected (border, underline, or selected indicator depending on your selector style)."
            value={settings.selected_color || adminColor}
            onChange={(value) =>
              setSettings({ ...settings, selected_color: value })
            }
          />
        </div>
      </HighlightableField>
    </div>
  );
}