import React from 'react';
import { Col, Form, Row } from 'react-bootstrap';
import styles from '../css/UniClienteUniPunto.module.css';

export interface OpcionToggle {
    id: string;
    etiqueta: string;
    checked: boolean;
    onChange: (checked: boolean) => void;
}

export interface OpcionesAdicionalesTogglesProps {
    opciones: OpcionToggle[];
}

export const OpcionesAdicionalesToggles: React.FC<OpcionesAdicionalesTogglesProps> = ({
    opciones,
}) => {
    return (
        <Row className={`g-3 gx-4 gy-2 ${styles.opcionesToggles}`}>
            {opciones.map((opcion) => (
                <Col key={opcion.id} xs={12} sm={6} lg={3}>
                    <Form.Check
                        type="switch"
                        id={opcion.id}
                        label={opcion.etiqueta}
                        checked={opcion.checked}
                        onChange={(e) => opcion.onChange(e.target.checked)}
                        className="fw-medium"
                    />
                </Col>
            ))}
        </Row>
    );
};