import type { BasicFilters } from "../lib/types";

import { Slider } from "./Slider";

interface SliderGroupProps {

  filters: BasicFilters;

  onChange: (key: keyof BasicFilters, value: number) => void;

}

const SLIDER_CONFIG: {

  key: keyof BasicFilters;

  label: string;

  min: number;

  max: number;

}[] = [

  { key: "brightness", label: "BRIGHTNESS", min: 0, max: 200 },

  { key: "contrast", label: "CONTRAST", min: 0, max: 200 },

  { key: "exposure", label: "EXPOSURE", min: -100, max: 100 },

  { key: "saturation", label: "SATURATION", min: 0, max: 200 },

  { key: "temperature", label: "TEMPERATURE", min: -100, max: 100 },

  { key: "tint", label: "TINT", min: -100, max: 100 },

  { key: "highlights", label: "HIGHLIGHTS", min: -100, max: 100 },

  { key: "shadows", label: "SHADOWS", min: -100, max: 100 },

];

export function SliderGroup({ filters, onChange }: SliderGroupProps) {

  return (

    <div className="slider-group">

      {SLIDER_CONFIG.map(({ key, label, min, max }) => (

        <Slider

          key={key}

          label={label}

          value={filters[key]}

          min={min}

          max={max}

          onChange={(v) => onChange(key, v)}

        />

      ))}

    </div>

  );

}