import { Switch } from '@bjsdistribution/dms-component-library';
import React from 'react';
import styled from 'styled-components';
import { getIcon } from './helper';

interface SliderProps {
  serviceName: string;
  serviceId: number;
  isSelected: boolean;
  toggle: (id: number) => void;
  disabled: boolean;
}

function ServiceSlider(props: SliderProps) {
  // const onClick = (event: React.MouseEvent<HTMLDivElement>) => {
  //   event.preventDefault();
  //   props.toggle(props.serviceId);
  // };

  return (
    <Container>
      <ServiceIcon src={getIcon(props.serviceId)} />
      <ServiceName>{props.serviceName}</ServiceName>
      {/* to stop event propagation */}
      <div className="hidden">
        <Switch
          checked={props.isSelected}
          name={props.serviceName}
          onChange={() => {}}
          disabled={props?.disabled}
        />
      </div>
    </Container>
  );
}

const ServiceName = styled.span`
  color: #6a7378;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  text-transform: capitalize;
`;

const ServiceIcon = styled.img`
  min-width: 28px;
  height: 28px;
`;

const Container = styled.div`
  display: flex;
  gap: 10px;
  align-items: center;
  /* cursor: not-allowed; */
  flex: 1;
`;

export default ServiceSlider;
