import {
    ContactSensorProduct,
    MotionSensorProduct,
    OutdoorSirenProduct,
    RangeExtenderProduct,
    React
} from '../src/Svg/index';
import { AdditionList } from '../src/List';

export const ListSection = () => {
    const MotionSensor = <MotionSensorProduct/>;
    const ContactSensor = <ContactSensorProduct/>;
    const OutdoorSiren = <OutdoorSirenProduct/>;
    const RangeExtender = <RangeExtenderProduct/>;

    const callback = () => { alert('this is a callback') };

    const items = [
        {
            image: MotionSensor,
            text: 'Motion Sensor',
            callback: callback,
        },
        {
            image: ContactSensor,
            text: 'Contact Sensor',
            callback: callback,
        },
        {
            image: OutdoorSiren,
            text: 'Outdoor Sensor',
            callback: callback,
        },
        {
            image: RangeExtender,
            text: 'Range Extender',
            callback: callback,
        },
    ]

    return <>
      <div className="mb-8">
          <h2 className="mb-4">Lists</h2>
          <div style={{width: '328px', height: '232px'}}>
              <AdditionList children={items} />
          </div>
      </div>
    </>;
}