import { AlimtalkSettingFlagKeys } from "../../model/alimtalk/types";

export interface AlimTalkSettingServiceRowProps {
  title: string;
  merchantFlag?: boolean;
  userFlag?: boolean;
  setMerchantFlag: (merchantFlag: boolean) => void;
  setUserFlag: (userFlag: boolean) => void;
};

export const AlimTalkSettingServiceRow = ({
  title,
  merchantFlag,
  userFlag,
  setMerchantFlag,
  setUserFlag
}: AlimTalkSettingServiceRowProps) => {

  const onChangeMerchantFlag = (value: boolean) => {
    setMerchantFlag(value);
  };
  const onChangeUserFlag = (value: boolean) => {
    setUserFlag(value);
  };

  return (
    <>
      <div className="service-row">
        <span>{ title }</span>
        <div className="switch-group">
          <label className="settings-switch">
            <input 
              type="checkbox"
              checked={ merchantFlag }
              onChange={ (e) => onChangeMerchantFlag(e.target.checked) }
            />
            <span className="slider"></span>
          </label>
          <label className="settings-switch">
            <input 
              type="checkbox" 
              checked={ userFlag } 
              onChange={ (e) => onChangeUserFlag(e.target.checked) }
            />
            <span className="slider"></span>
          </label>
        </div>
      </div>
    </>
  )
};