import React from 'react';
import { Check } from 'lucide-react';
import { DATA_SECTIONS, DataSection } from '../../lib/types';

interface SectionPickerProps {
  value: DataSection[];
  onChange: (sections: DataSection[]) => void;
  label?: string;
}

// Which parts of the own data a restore or import covers; at least one stays selected
export const SectionPicker: React.FC<SectionPickerProps> = ({ value, onChange, label = 'Bereiche' }) => (
  <div className="flex flex-wrap items-center gap-1.5" role="group" aria-label={label}>
    <span className="text-[11px] text-muted mr-1">{label}:</span>
    {DATA_SECTIONS.map((sec) => {
      const on = value.includes(sec.id);
      return (
        <button
          key={sec.id}
          type="button"
          role="checkbox"
          aria-checked={on}
          onClick={() => {
            const next = on ? value.filter((v) => v !== sec.id) : [...value, sec.id];
            if (next.length > 0) onChange(next);
          }}
          className={`h-11 sm:h-7 px-2.5 rounded-btn border text-[11px] inline-flex items-center gap-1 transition-colors ${
            on ? 'border-accent bg-accent/10 text-main' : 'border-border text-muted hover:text-main'
          }`}
        >
          {on && <Check className="w-3 h-3 text-accent" />}
          {sec.label}
        </button>
      );
    })}
  </div>
);