import React from 'react';
import styled from 'styled-components';

export interface IReadOnlyCheckItemProps {
  labelLeft?: string;
  labelRight?: string;
  checked: boolean;
}

export const ReadOnlyCheckItem: React.FC<IReadOnlyCheckItemProps> = ({
         labelLeft,
         labelRight,
         checked,
       }) => {
         return (
           <Container>
             {labelLeft && <Label>{labelLeft}</Label>}
             <div className="rpgui-checkbox-container">
               <CheckBox
                 className="rpgui-checkbox"
                 type="checkbox"
                 checked={checked}
                 readOnly
               />
               <label></label>
             </div>
             {labelRight && <Label isRight>{labelRight}</Label>}
           </Container>
         );
       };

const Container = styled.div`
  display: flex;
  align-items: center;
  width: 100%;
  height: 20px;
`;

const Label = styled.span<{ isRight?: boolean }>`
  ${({ isRight }) => (isRight ? 'margin-left: auto;' : 'margin-right: auto;')}
`;

const CheckBox = styled.input.attrs({ type: 'checkbox' })``;
