import React from 'react';
import FilterListIcon from '@mui/icons-material/FilterList';
import './ConsentFilter.css';

/**
 * ConsentFilter Component
 * Displays checkboxes for filtering groups by consent type
 * 
 * @param {Object} filters - Current filter state { workshop, facebook, instagram, tiktok }
 * @param {Function} onChange - Callback when filter changes
 * @param {Array} platforms - Available social media platforms from API
 */
const ConsentFilter = ({ filters, onChange, platforms = [] }) => {
    const handleCheckboxChange = (filterName, checked) => {
        onChange({
            ...filters,
            [filterName]: checked
        });
    };

    // Platform mapping for display names
    const platformLabels = {
        workshop: 'Werkstatt',
        facebook: 'Facebook',
        instagram: 'Instagram',
        tiktok: 'TikTok'
    };

    return (
        <div className="consent-filter-container">
            <h2 className="consent-filter-title">Filter</h2>
            <fieldset className="consent-filter">
                <legend className="consent-filter-legend">
                    <FilterListIcon className="filter-icon" />
                    Consent-Filter
                </legend>
                <div className="consent-filter-options">
                    <label className="consent-filter-label">
                        <input
                            type="checkbox"
                            checked={filters.workshop}
                            onChange={(e) => handleCheckboxChange('workshop', e.target.checked)}
                            className="consent-filter-checkbox"
                        />
                        {platformLabels.workshop}
                    </label>
                    <label className="consent-filter-label">
                        <input
                            type="checkbox"
                            checked={filters.facebook}
                            onChange={(e) => handleCheckboxChange('facebook', e.target.checked)}
                            className="consent-filter-checkbox"
                        />
                        {platformLabels.facebook}
                    </label>
                    <label className="consent-filter-label">
                        <input
                            type="checkbox"
                            checked={filters.instagram}
                            onChange={(e) => handleCheckboxChange('instagram', e.target.checked)}
                            className="consent-filter-checkbox"
                        />
                        {platformLabels.instagram}
                    </label>
                    <label className="consent-filter-label">
                        <input
                            type="checkbox"
                            checked={filters.tiktok}
                            onChange={(e) => handleCheckboxChange('tiktok', e.target.checked)}
                            className="consent-filter-checkbox"
                        />
                        {platformLabels.tiktok}
                    </label>
                </div>
            </fieldset>
        </div>
    );
};

export default ConsentFilter;
